Level 1
Package used: https://packagist.org/packages/sparemusic/resumable-js
Aug 1, 2019
6
Level 1
ResumableJS Not user how to link html/js to the request or route
Followed the instructions for this plugin, got the links to the needed libraries. Used an example code for the upload. Have no idea how it links to the Route or Request.
May someone please advise - also ignore my last post.
HTML + JS
<!doctype html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Laravel</title>
<!-- Fonts -->
<link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/resumable.js/1.1.0/resumable.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<div class="container" style="padding-top: 100px;">
<div class="row">
<div class="col-lg-offset-2 col-lg-8">
<div class="page-header">
<h1> Resumable file upload<small> <br/>with Resumable.js and Resumable.php</small></h1>
</div>
</div>
<div class="col-lg-offset-2 col-lg-8">
<button type="button" class="btn btn-success" aria-label="Add file" id="add-file-btn">
<span class="glyphicon glyphicon-plus" aria-hidden="true"></span> Add file
</button>
<button type="button" class="btn btn-info" aria-label="Start upload" id="start-upload-btn">
<span class="glyphicon glyphicon-upload" aria-hidden="true"></span> Start upload
</button>
<button type="button" class="btn btn-warning" aria-label="Pause upload" id="pause-upload-btn">
<span class="glyphicon glyphicon-pause " aria-hidden="true"></span> Pause upload
</button>
</div>
<div class="col-lg-offset-2 col-lg-8">
<p>
<div class="progress hide" id="upload-progress">
<div class="progress-bar progress-bar-success progress-bar-striped" role="progressbar" style="width: 0%">
<span class="sr-only"></span>
</div>
</div>
</p>
</div>
</div>
</div>
<script>
var r = new Resumable({
target: 'upload',
testChunks: true
});
r.assignBrowse(document.getElementById('add-file-btn'));
$('#start-upload-btn').click(function(){
r.upload();
});
$('#pause-upload-btn').click(function(){
if (r.files.length>0) {
if (r.isUploading()) {
return r.pause();
}
return r.upload();
}
});
var progressBar = new ProgressBar($('#upload-progress'));
r.on('fileAdded', function(file, event){
progressBar.fileAdded();
});
r.on('fileSuccess', function(file, message){
progressBar.finish();
});
r.on('progress', function(){
progressBar.uploading(r.progress()*100);
$('#pause-upload-btn').find('.glyphicon').removeClass('glyphicon-play').addClass('glyphicon-pause');
});
r.on('pause', function(){
$('#pause-upload-btn').find('.glyphicon').removeClass('glyphicon-pause').addClass('glyphicon-play');
});
function ProgressBar(ele) {
this.thisEle = $(ele);
this.fileAdded = function() {
(this.thisEle).removeClass('hide').find('.progress-bar').css('width','0%');
},
this.uploading = function(progress) {
(this.thisEle).find('.progress-bar').attr('style', "width:"+progress+'%');
},
this.finish = function() {
(this.thisEle).addClass('hide').find('.progress-bar').css('width','0%');
}
}
</script>
</body>
</html>
Route
Route::resumable("/upload", "UploadController@upload");
UploadController
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
class UploadController extends Controller
{
public function upload(SomeUpload $upload)
{
$upload->process();
if ($upload->isComplete()) {
// File uploaded, do something with file
// $upload->getFilename(true); filename with extension
// $upload->getFilepath(); full filepath
}
return $upload->respond();
}
}
Request
<?php
namespace App\Http\ResumableRequests;
use SpareMusic\ResumableJS\Resumable;
use Illuminate\Support\Facades\Storage;
use SpareMusic\ResumableJS\ResumableParameters;
use Symfony\Component\HttpFoundation\File\UploadedFile;
class SomeUpload extends Resumable
{
/**
* Setup resumable instance
*/
public function setup()
{
$chunkPath = Storage::disk('local')->path('chunks');
$uploadPath = Storage::disk('local')->path('uploads');
$this->setChunkPath($chunkPath)
->setUploadPath($uploadPath)
->setValidator(function (UploadedFile $file, ResumableParameters $parameters) {
return true;
});
}
}
The html/js part is where I get stuck, how am I suppose to upload the files, the tutorials are never finished and my JavaScript is bad. Please may some one aid :)
Level 1
Okay I made some changes:
script
(function () {
var r = new Resumable({
target: '{{ url('upload')}}',
query: {},
maxChunkRetries: 2,
maxFiles: 3,
prioritizeFirstAndLastChunk: true,
simultaneousUploads: 4,
chunkSize: 1 * 1024 * 1024
});
var results = $('#results'),
draggable = $('#dragHere'),
uploadFile = $('#uploadFiles'),
browseButton = $('#browseButton'),
nothingToUpload = $('[data-nothingToUpload]');
// if resumable is not supported aka IE
if (!r.support) location.href = 'http://browsehappy.com/';
r.assignBrowse(browseButton);
r.assignDrop(draggable);
r.on('fileAdded', function (file, event) {
var template =
'<div data-uniqueid="' + file.uniqueIdentifier + '">' +
'<div class="fileName">' + file.fileName + ' (' + file.file.type + ')' + '</div>' +
'<div class="large-6 right deleteFile">X</div>' +
'<div class="progress large-6">' +
'<span class="meter" style="width:0%;"></span>' +
'</div>' +
'</div>';
results.append(template);
});
uploadFile.on('click', function () {
if (results.children().length > 0) {
r.upload();
} else {
nothingToUpload.fadeIn();
setTimeout(function () {
nothingToUpload.fadeOut();
}, 3000);
}
});
$(document).on('click', '.deleteFile', function () {
var self = $(this),
parent = self.parent(),
identifier = parent.data('uniqueid'),
file = r.getFromUniqueIdentifier(identifier);
r.removeFile(file);
parent.remove();
});
r.on('fileProgress', function (file) {
var progress = Math.floor(file.progress() * 100);
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.meter').css('width', progress + '%');
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.meter').html(' ' + progress + '%');
});
r.on('fileSuccess', function (file, message) {
$('[data-uniqueId=' + file.uniqueIdentifier + ']').find('.progress').addClass('success');
});
r.on('uploadStart', function () {
$('.alert-box').text('Uploading....');
});
r.on('complete', function () {
$('.alert-box').text('Done Uploading');
});
})();
and now I am getting the following Errors in the console:
Failed to load resource: the server responded with a status of 500 (Internal Server Error) /test/public/upload?....ableTotalChunks=1:1
Failed to load resource: the server responded with a status of 419 (unknown status) /test/public/upload?....ableTotalChunks=1:1
Level 1
Sorted it out...
Level 3
how did you sort it out?
1 like
Level 1
@Wandumi Sichali It was the class App\Http\ResumableRequests not in the models and in the controller. They {{url(''upload)}} should of been {{route('upload')}}
It will be better to use Ajax to be honest, the constant requests back and forth causes a lot of strain on your server and app. However I switched over to this package in the end and got the needed results I was looking for: https://github.com/pionl/laravel-chunk-upload
use this as an example: https://github.com/pionl/laravel-chunk-upload-example
Level 3
@LadyDeathKZN Thanks for answering, am implementing them now, it is an work assessment project, if I manage to do it, probably I will have a dream job. Thanks so much
1 like
Please or to participate in this conversation.