Comments (3)
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>
from upload.
example here.
https://github.com/recca0120/upload/blob/master/src/Receiver.php#L77-L94
I'll update Readme Later
from upload.
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)
- is there an FileApi JS html example? HOT 1
- any chance for a demo using jQuery-File-Upload basic plus UI ? HOT 2
- file uploaded successfully,but got error from server side HOT 2
- Integrate with dropzone.js HOT 2
- $receiver = new Receiver(new FileAPI($config)); and then no more.... HOT 1
- fine uploader delete button not work~ HOT 2
- Trouble with modifying storage paths HOT 1
- File not found HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
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.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from upload.