When changing the UploadInput url to something other than the demo url, the progress bar for the file uploading is near instant, even if the file is still in an uploading state. I've tested with 90mb files at the progress bar will jump from 13% - 60% - 100%. When uploading against the ngx-upload.com url it shows the correct progress including an ETA and Upload Speed.
The done event for UploadOutput fires correctly after the file has officially uploaded.
I'm using laravels built in storage support to upload s3 files.
onUploadOutput(output: UploadOutput): void {
console.log('output type: ',output.type)
switch (output.type) {
case 'allAddedToQueue':
console.log('addedAddedToQueue');
let token = this.userService.currentUser().api_token;
const event: UploadInput = {
type: 'uploadAll',
url: environment.serverUrl + 'api/file-upload',
// url: 'https://ngx-uploader.com/upload', // <---- this works perfectly
method: 'POST',
headers: {
'Authorization': 'Bearer ' + token
},
includeWebKitFormBoundary: true, // <---- set WebKitFormBoundary
data: { foo: 'bar' },
file: this.files[this.files.length - 1]
};
this.uploadInput.emit(event);
break;
case 'uploading':
console.log('uploading')
console.log(output)
if (typeof output.file !== 'undefined') {
// update current data in files array for uploading file
const index = this.files.findIndex((file) => typeof output.file !== 'undefined' && file.id === output.file.id);
this.files[index] = output.file;
console.group();
console.log('progress is: ',output.file.progress.data.percentage)
console.log('upload speed: ',output.file.progress.data.speedHuman)
console.groupEnd();
}
break;
case 'done':
console.log('done');
this.files.forEach(file => {
console.log(file.response);
// Check the file.response.status.
// If success, grab the file (file.response.file)
// this.response.emit(file.response);
console.log(file.response.file)
});
// The file is downloaded
break;
}
}
<?php
namespace Facet\Http\Controllers;
use Illuminate\Http\Request;
use \LaravelDoctrine\ORM\Facades\EntityManager;
use \Facet\Services\BaseService;
use Illuminate\Support\Facades\Storage;
class FileUploadController extends ApiController {
public function store(Request $request) {
if($request->hasFile('file')) {
//get filename with extension
$filenamewithextension = $request->file('file')->getClientOriginalName();
//get filename without extension
$filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
//get file extension
$extension = $request->file('file')->getClientOriginalExtension();
//filename to store
$filenametostore = $filename.'_'.time().'.'.$extension;
//Upload File to s3
$output = Storage::disk('s3')->put($filenametostore, fopen($request->file('file'), 'r+'), 'public');
$url = Storage::disk('s3')->url($filename);
$response = array('status' => 'success', 'file' => $url);
} else {
// File could be too large. Depends on what's specified in php.ini
$response = array('status' => 'error', 'message' => 'Error with finding file.');
}
return response()->json($response);
}
}
?>
Example of file upload progress data for 93mb file
console.log(output)
/*
progress: {
data: {
endTime: null
eta: 0
etaHuman: "00:00:00"
percentage: 100
speed: 88097403
speedHuman: "84.02 MB/s"
startTime: 1541465378108
}
}
*/
console.group();
console.log('progress is: ',output.file.progress.data.percentage)
console.log('upload speed: ',output.file.progress.data.speedHuman)
console.groupEnd();
// progress is: 52
// upload speed: 80.45 MB/s
I'm unsure on what could be the cause for such odd progress behaviour. In the network tab is still shows the pending state and once the response comes through, only then does it the done event fire. As it should.
The issue has been raised before on the git project with no resolve.
