Giter VIP home page Giter VIP logo

Comments (3)

recca0120 avatar recca0120 commented on May 24, 2024 1

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

from upload.

recca0120 avatar recca0120 commented on May 24, 2024

example here.

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

I'll update Readme Later

from upload.

yeungc avatar yeungc commented on May 24, 2024

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);

	});

from upload.

Related Issues (9)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.