mercredi 28 décembre 2016

Upload Files directly to Amazon S3 bucket the progress bar is not working correctly using Laravel 5 and DropZone Js

Hi i am facing this issue with DropZone Js when i tries to uploads the files directly to Amazon S3 Bucket without uploading the files to server.

Whenever i upload file directly to the Amazon S3 Bucket using dropzone then the progress bar quickly reaches 100% mean while the file is still uploading on the Amazon S3 bucket and yet the DropZone js show 100% on the progress bar misleading the user. Here is my Js code

  Dropzone.autoDiscover = false;

          myDropzone = new Dropzone("div#dropzoneFileUpload", {
              url: baseUrl + "/challenge/store",
              success : function(file, response){
                alert('success')
              },

              error : function(file, response){
                this.removeAllFiles()


              },
              uploadProgress: function(progress) {
                // The event does not work when ever file is select it say 100 in alert 
                  alert(progress);
                  document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
              },

              autoProcessQueue: false,
              maxFiles: 1,
              maxFilesize: 20480, // MB
              addRemoveLinks: true,
              acceptedFiles: "video/*,mp4,.mkv,.avi,.flv,.3gp,.mov,.wmv,.webm",
              params: {
                  _token: token,
              }
          });

I am using Php Laravel 5.0 on server side i am not putting file on my server i am directly uploading the file to Amazon S3 Bucket Here is my Laravel Code The file is uploading to the bucket but progress bar is not working correctly.

$file = $request->file( 'file' );
$s3 = \Storage::disk('s3');
$filePath = '/buckVideo/' . $name;
$isS3VideoUpload = $s3->put($filePath, file_get_contents($file), 'public');

the file is successfully uploaded to Amazon S3 bucket but progress bar is not working correctly.It goes to 100% directly in an instant.While the server takes time give the response.

Thanks.



via Chebli Mohamed

Aucun commentaire:

Enregistrer un commentaire