How do we access file blobs in the server?

I am using Blueimp File Uploader.

While uploading files larger than the maxChunkSize, how do we access each uploaded file blobs separately in the server ?

My issue is that I need to forward the uploaded files in separate blobs to a different server using a backend api.

So far, looking at wiki, for chunks of 1 mb, I have added the following in the js :

$('#fileupload').fileupload({     url: 'server/php/',     maxChunkSize: 1000000 // 1 MB }); 

but after upload is completed, I see the full merged file in the server :

server/php/files 

How do we access the individual blobs on the server ?

I have not done any changes in the default file server/php/index.php :

error_reporting(E_ALL | E_STRICT); require('UploadHandler.php'); $upload_handler = new UploadHandler(); 

and the default UploadHandler class in

server/php/UploadHandler.php 

(https://github.com/blueimp/jQuery-File-Upload/blob/master/server/php/UploadHandler.php). File is too big to be placed here.

---

I tried adding fileuploadchunkdone option, but am unsure, how do we access the file blobs in the server -- that is if it is the right way to do it.

$('#fileupload').fileupload({     url: 'server/php/',     maxChunkSize: 1000000 // 1 MB }) .on('fileuploadchunkdone', function (e, data) {     console.log('chunkdone')     console.log(e)     console.log(data) }); 

1 Answers

Answers 1

chunking upload have 2 requirement

1. javascript to chunking (split of certain bytes) the file
2. PHP to save and merge file. commonly use : FILE_APPEND

i dont know what chunk file do you want to get. in client or server?

• if you want to get chunk which is will be send, you need check on fileuploadchunksend
• if you want to get chunk which is finished uploaded, you need check on fileuploadchunkdone

From your question title, i assume you need to get chunk file which is already uploaded in the server.

so let's we use basic html from this page https://github.com/blueimp/jQuery-File-Upload/wiki/Basic-plugin

HTML

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>jQuery File Upload Example</title> <style> .bar {     height: 18px;     background: green; } </style> </head> <body> <input id="fileupload" type="file" name="files[]" data-url="server/php/" multiple> <div id="progress">     <div class="bar" style="width: 0%;"></div> </div>  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="js/vendor/jquery.ui.widget.js"></script> <script src="js/jquery.iframe-transport.js"></script> <script src="js/jquery.fileupload.js"></script> <script> $(function () {     $('#fileupload').fileupload({         dataType: 'json',         done: function (e, data) {             $.each(data.result.files, function (index, file) {                 $('<p/>').text(file.name).appendTo(document.body);             });         },         progressall: function (e, data) {             var progress = parseInt(data.loaded / data.total * 100, 10);             $('#progress .bar').css(                 'width',                 progress + '%'             );             //console.log(progress);         },         maxChunkSize: 50000 // i prefer 50 Kb, because my file is only 190Kb (4 step)     })     .on('fileuploadchunksend', function (e, data) {         console.log('send');     })     .on('fileuploadchunkdone', function (e, data) {         console.log('done');         console.log(data.result);         //forceerror; wrong javascript function to make error so file upload will stopped. and we can start debugging     })     .on('fileuploadchunkfail', function (e, data) {         console.log('fail');         console.log(data);     })     .on('fileuploadchunkalways', function (e, data) {         console.log('always');     }); }); </script> </body>  </html> 

then we edit the php file: server/php/UploadHandler.php

line 1061

protected function handle_file_upload($uploaded_file, $name, $size, $type, $error,             $index = null, $content_range = null) { ....             if ($uploaded_file && is_uploaded_file($uploaded_file)) {                 // multipart/formdata uploads (POST method uploads)                 $path_parts = pathinfo($file_path); //new                 $chunkFileName = $path_parts['dirname'].'/'.$path_parts['filename'].'_'. $content_range[1]."_". $content_range[2].".".$path_parts['extension'];//new                 if ($append_file) {                     file_put_contents($chunkFileName,  file_get_contents($uploaded_file));//new                     file_put_contents(                         $file_path,                         fopen($uploaded_file, 'r'),                         FILE_APPEND                     );                 } else {                     file_put_contents($chunkFileName,  file_get_contents($uploaded_file));//new                     move_uploaded_file($uploaded_file, $file_path);                 }             } else {                 // Non-multipart uploads (PUT method support) .... 

full code: https://pastebin.com/3AsHbkqQ (i just add 4 lines to get the chunks)

now lets try the code. i try upload 196kb dummy.png using 50kb chunk. (this will processed in 4 step)

after upload dummy.png file: now you will get 5 files:

1. dummy.png //full file
2. dummy_0_49999.png //1st chunk
3. dummy_50000_99999.png //2nd chunk
4. dummy_100000_149999.png //3rd chunk
5. dummy_150000_196064.png //last chunk

Then you can do anything with this chunk

NOTE: from my experience please migrate to plupload instead using blueimp. you can read my comment below your question.

Read More

Rails upload to AWS creating .zip.cpgz file loop

I'm running into a weird situation where some files, specifically ZIP format, when uploaded to AWS within my Rails app are corrupted/converted. When downloaded and decompressed they turn into a CPGZ format, which decompresses back into a ZIP, and infinitely does this.

I haven't noticed a pattern that causes this, so it's seemingly sporadic, and can confirm that the files are not corrupt before upload. The only other issue/topic I've found on this relates to PHP, and seems to be different circumstances.

I am using AWS SDK for Ruby v1 (not v2 because of my Rails version) and jQuery-File-Upload. Since some of the files are large, I am using chunked uploads.

In my controller, the presigned POST URL is created like this:

S3_BUCKET.presigned_post(key: "uploads/#{SecureRandom.uuid}-${filename}", success_action_status: '201') 

And jQuery File Upload is set up like so (some parts removed for brevity):

this.$el.fileupload({   fileInput: this.uploadField, // this is an <input type="file">   url: this.awsURL, // https://BUCKET.s3.amazonaws.com/   formData: JSON.parse(this.awsData), // {"AWSAccessKeyId":"...","key":"uploads/1234-${filename}","policy":"...","signature":"...","success_action_status":"201"}   type: 'POST',   autoUpload: true,   paramName: 'file',   dataType: 'XML',   replaceFileInput: false,   maxChunkSize: 1000000,   add: function(event, data) {     var file = data.files[0];     var fileType = file.type;      // Check file type     if (~'ai sketch psd jpg jpeg png zip ttf woff eot gif'.indexOf(fileType.toLowerCase())) {       return alert('Sorry, that file type is not supported');     };      data.submit();   },   progress: function(event, data) {     // Display progress   },   done: function(event, data) {     var file = data.files[0];     var fileName = file.name.replace(/ /g,"_");     var item = _this.uploadedItems[fileName];     var key = $(data.jqXHR.responseXML).find("Key").text();     // awsHost = BUCKET.s3.amazonaws.com     var url = '//' + _this.awsHost + '/' + key;      // Set form values using above info   },   fail: function(event, data) {     // Alert failure   } }); 

Has anyone experienced this? It's very frustrating.

1 Answers

Answers 1

Set content-type to application/zip when you sending the request.

SEE https://github.com/aws/aws-sdk-ruby/blob/aws-sdk-v1/lib/aws/s3/presigned_post.rb

Read More

blueimp jQuery-File-Upload not displaying thumbnail after uploading the image

I have downloaded latest plugin and dependencies from here version 9.12.1. I copied the downloaded files in my wamp server and accessed it from localhost/jQuery-File-Upload-9.12.1/index.html.

After selecting image file, a preview of image is displayed before uploading. But once image is uploaded the thumbnail is not getting displayed.

However in Inspect Element the link of thumbnail is present in image src.

File is uploaded in server folder and thumbnail is created.

Name and size of image is getting displayed.

What am I doing wrong ?

2 Answers

Answers 1

Making with dirty tricks ... loop until the image is ready before showing preview image.
See jQuery: Check if image exists. In my case I use before the image tag as ...

            while(urlExists(file.path) != 200) {                    console.log("still loading image");             }             <img src="=file.path" width="100px"> 

The problem is writing image is a little late than response to client. So , 404 error for this image after rendering to html. But image is actually exist when I checked. As above snippet ,I am trying to wait for loading image after server has successfully created image. I know it is not a good way but it works. I believe this error will not happen at production mode and I am trying to fix for running at localhost.

Answers 2

As per your question and comments, check for two things:

First, the thumbnail image downloaded has status 200 or 404 in network tab of developer window. If its 200, issue is something else.

If it is 404: Check in your .htaccess file for this content:

RewriteEngine on RewriteCond %{HTTP_REFERER} !^$ RewriteCond %{HTTP_REFERER} !^http://(www\.)?yourdomain.com/.*$ [NC] RewriteRule \.(gif|jpg|css)$ - [F] 

The above lines tell the Apache Web Server to block all links to '.gif', '.jpg' and '.css' files which are not from the domain name 'http://www.yourdomain.com/'. Before uploading your .htaccess file ensure you replace 'yourdomain.com' with the appropriate web site address.

See if the url in .htaccess is properly set to your domain (i.e., localhost).

Reference: http://www.htaccess-guide.com/hot-link-prevention-techniques/

Read More