Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Server response a error while using Laravel #13

Closed
yeungc opened this issue Jan 22, 2018 · 3 comments
Closed

Server response a error while using Laravel #13

yeungc opened this issue Jan 22, 2018 · 3 comments

Comments

@yeungc
Copy link

yeungc commented Jan 22, 2018

Hi, I got this error message while using Fineuploader + Laravel to upload:

Type error: Argument 1 passed to Recca0120\Upload\FineUploader::completedResponse() must be an instance of Illuminate\Http\JsonResponse, null given, called in D:\wamp\www\laravel\vendor\recca0120\upload\src\Receiver.php on line 49

Javascript:

<script>
    var uploader = new qq.FineUploader({
        element: document.getElementById("fine-uploader"),
        debug: true,
        request: {
            endpoint: "http://laravel.work/upload",
            inputName: 'file',
        },
        chunking: {
            enabled: true,
            concurrent: {
                enabled: true
            },
            success: {
                endpoint: "http://laravel.work/upload"
            }
        },
        resume: {
            enabled: true
        },
        retry: {
            enableAuto: true,
            showButton: true
        }
    })
</script>

routes\web.php:
Route::post('upload', 'UploadController@upload');

Controller:

class UploadController extends Controller
{
    public function upload(UploadManager $manager)
    {
        $driver = 'fine-uploader';
        $inputName = 'file';
        $storagePath = 'storage/temp';

        return $manager
            ->driver($driver)
            ->receive($inputName, function (UploadedFile $uploadedFile, $path, $domain, $api) {
                // do something

            });
    }
}

But if I using your demo code directly, everything works fine, maybe there is something I forgot to set?
@recca0120
Copy link
Owner

example here.

https://github.com/recca0120/upload/blob/master/src/Receiver.php#L77-L94

I'll update Readme Later

@yeungc
Copy link
Author

yeungc commented Jan 22, 2018

Hi, sorry but I'm now got this message:

The Response content must be a string or object implementing __toString(), "object" given.

Even I use:

return $manager->driver($driver)->receive($inputName);

Or:

return $manager
	->driver($driver)
	->receive($inputName, function (UploadedFile $uploadedFile, $path, $domain, $api) {
		$clientOriginalName = $uploadedFile->getClientOriginalName();
		$clientOriginalExtension = strtolower($uploadedFile->getClientOriginalExtension());
		$basename = pathinfo($uploadedFile->getBasename(), PATHINFO_FILENAME);
		$filename = md5($basename).'.'.$clientOriginalExtension;
		$mimeType = $uploadedFile->getMimeType();
		$size = $uploadedFile->getSize();
		$uploadedFile->move($path, $filename);
		$response = [
			'name' => pathinfo($clientOriginalName, PATHINFO_FILENAME).'.'.$clientOriginalExtension,
			'tmp_name' => $path.$filename,
			'type' => $mimeType,
			'size' => $size,
			'url' => $domain.$path.$filename,
		];

		return new JsonResponse($response);

	});

@recca0120
Copy link
Owner

route

Route::get('/upload', function() {
    return view('upload');
});

Route::post('/upload', function(\Recca0120\Upload\UploadManager $manager) {
    $driver = 'fine-uploader'; // or 'fileapi'
    $inputName = 'file'; // $_FILES index;

    return $manager->driver($driver)->receive($inputName);
});

view

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>DEMO</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/5.15.5/all.fine-uploader/fine-uploader-gallery.min.css" rel="stylesheet" />
    <style>
        html, body {
            font-size: 14px;
        }
        .filelist {
            margin-bottom: 1em;
        }
        .js-fileapi-wrapper {
            position: relative;
        }
        .js-fileapi-wrapper:hover {
            cursor: pointer;
        }
        .js-fileapi-wrapper:hover a {
            text-decoration: underline;
        }
        .js-fileapi-wrapper input {
            opacity: 0;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
        }
        #fileupload a,
        #fileapi a,
        #plupload a {
            color: #0088cc;
            cursor: pointer;
        }
    </style>
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/file-uploader/5.15.5/all.fine-uploader/all.fine-uploader.min.js"></script>

    <script>
        function humanFileSize(size) {
            var i = Math.floor( Math.log(size) / Math.log(1024) );
            return ( size / Math.pow(1024, i) ).toFixed(2) * 1 + ' ' + ['B', 'kB', 'MB', 'GB', 'TB'][i];
        };
    </script>

    <section>
        <h2>Fine Uploader</h2>
        <script type="text/template" id="qq-template">
            <div class="qq-uploader-selector qq-uploader qq-gallery" qq-drop-area-text="Drop files here">
                <div class="qq-total-progress-bar-container-selector qq-total-progress-bar-container">
                    <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-total-progress-bar-selector qq-progress-bar qq-total-progress-bar"></div>
                </div>
                <div class="qq-upload-drop-area-selector qq-upload-drop-area" qq-hide-dropzone>
                    <span class="qq-upload-drop-area-text-selector"></span>
                </div>
                <div class="qq-upload-button-selector qq-upload-button">
                    <div>Upload a file</div>
                </div>
                <span class="qq-drop-processing-selector qq-drop-processing">
                    <span>Processing dropped files...</span>
                    <span class="qq-drop-processing-spinner-selector qq-drop-processing-spinner"></span>
                </span>
                <ul class="qq-upload-list-selector qq-upload-list" role="region" aria-live="polite" aria-relevant="additions removals">
                    <li>
                        <span role="status" class="qq-upload-status-text-selector qq-upload-status-text"></span>
                        <div class="qq-progress-bar-container-selector qq-progress-bar-container">
                            <div role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" class="qq-progress-bar-selector qq-progress-bar"></div>
                        </div>
                        <span class="qq-upload-spinner-selector qq-upload-spinner"></span>
                        <div class="qq-thumbnail-wrapper">
                            <img class="qq-thumbnail-selector" qq-max-size="120" qq-server-scale>
                        </div>
                        <button type="button" class="qq-upload-cancel-selector qq-upload-cancel">X</button>
                        <button type="button" class="qq-upload-retry-selector qq-upload-retry">
                            <span class="qq-btn qq-retry-icon" aria-label="Retry"></span>
                            Retry
                        </button>

                        <div class="qq-file-info">
                            <div class="qq-file-name">
                                <span class="qq-upload-file-selector qq-upload-file"></span>
                                <span class="qq-edit-filename-icon-selector qq-btn qq-edit-filename-icon" aria-label="Edit filename"></span>
                            </div>
                            <input class="qq-edit-filename-selector qq-edit-filename" tabindex="0" type="text">
                            <span class="qq-upload-size-selector qq-upload-size"></span>
                            <button type="button" class="qq-btn qq-upload-delete-selector qq-upload-delete">
                                <span class="qq-btn qq-delete-icon" aria-label="Delete"></span>
                            </button>
                            <button type="button" class="qq-btn qq-upload-pause-selector qq-upload-pause">
                                <span class="qq-btn qq-pause-icon" aria-label="Pause"></span>
                            </button>
                            <button type="button" class="qq-btn qq-upload-continue-selector qq-upload-continue">
                                <span class="qq-btn qq-continue-icon" aria-label="Continue"></span>
                            </button>
                        </div>
                    </li>
                </ul>

                <dialog class="qq-alert-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">Close</button>
                    </div>
                </dialog>

                <dialog class="qq-confirm-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">No</button>
                        <button type="button" class="qq-ok-button-selector">Yes</button>
                    </div>
                </dialog>

                <dialog class="qq-prompt-dialog-selector">
                    <div class="qq-dialog-message-selector"></div>
                    <input type="text">
                    <div class="qq-dialog-buttons">
                        <button type="button" class="qq-cancel-button-selector">Cancel</button>
                        <button type="button" class="qq-ok-button-selector">Ok</button>
                    </div>
                </dialog>
            </div>
        </script>

        <div id="fine-uploader"></div>
        <script>
            // Some options to pass to the uploader are discussed on the next page
            var uploader = new qq.FineUploader({
                element: document.getElementById("fine-uploader"),
                debug: true,
                request: {
                    endpoint: '{{ url('upload') }}',
                    inputName: 'file',
                    customHeaders: {
                        'X-CSRF-TOKEN': '{{ csrf_token() }}'
                    }
                },
                // deleteFile: {
                //     enabled: true,
                //     endpoint: "./server/endpoint.php"
                // },
                chunking: {
                    enabled: true,
                    concurrent: {
                        enabled: true
                    },
                    success: {
                        endpoint: '{{ url('upload') }}',
                        customHeaders: {
                            'X-CSRF-TOKEN': '{{ csrf_token() }}'
                        }
                    }
                },
                resume: {
                    enabled: true
                },
                retry: {
                    enableAuto: true,
                    showButton: true
                }
            })
        </script>
    </section>
</body>
</html>

1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@recca0120 @yeungc