Rectangle 27 1

Below I have the code to upload the image as binary in angular using FormData. The server code will be the code to handle a regular file upload via a form.

var form = document.forms.namedItem("fileinfo");
form.addEventListener('submit', function (ev) {

var oData = new FormData(form);

var xhr = new XMLHttpRequest();
xhr.responseType = "arraybuffer";

xhr.open("POST", "http://vendorapi.net/Upload", true);
xhr.onload = function (oEvent) {
    if (xhr.status == 200) {
        var blob = new Blob([xhr.response], { type: "image/png" });
        //var objectUrl = URL.createObjectURL(blob);
        //window.open(objectUrl);
        //console.log(blob);
        var formData = new FormData()
        formData.append('file', blob);
        formData.append('containerName', boxContainerName);
        formData.append('filename', 'Texture_0.png');

        $http.post('/postAdvancedTest', formData, {
            transformRequest: angular.identity,
            headers: {'Content-Type': undefined}
        }).success(function (data) {
            //console.log(data);
            console.log("success!");

            // Clear previous 3D render
            $('#webGL-container').empty();

            // Generated new 3D render
            $scope.generate3D();
        }, function (err) {
            //console.log(err);
        });
    } else {
        oOutput.innerHTML = "Error " + xhr.status + " occurred when trying to upload your file.<br \/>";
    }
};

xhr.send(oData);
ev.preventDefault();
}, false);

Any ideas on how this could all be handled server side in Node (both the posting and the return) without routing me to a different page once the process is complete?

I'm pretty green when it comes to node.js but you can check req.files for the file if you're on express.js < 4. If you're on version 4 or above you can use something like npmjs.com/package/multer to get the file.

javascript - Saving blob (might be data!) returned by AJAX call to Azu...

javascript ajax node.js express azure-storage-blobs
Rectangle 27 3

This was caused by Google Chrome limiting the number of characters allowed inside of an input (type=text) tag. My DataURL code was close to 600,000 characters, but the input was cutting the code off at a number less than that, which caused my image to be corrupt.

To solve this, I went into my JS code and tried to shorten the DataURL code.

var dataURL = bottleCanvas.toDataURL("image/jpeg", 0.5);

And it shrunk the number of characters to less than 100,000.

ToDataURL (JavaScript) of Canvas is Creating a Corrupt PNG File After ...

javascript php jquery canvas png
Rectangle 27 1

That's most likely the "best" way. But keep in mind that it's not just alpha-trans that IE6 doesn't implement properly when it comes to PNG files; the color space is corrupt due to IE not implementing the gamma properly, and thus PNG files often show "darker" than they should. One alternative "solution" that we implemented on a recent project was to mark every png image with a "toGif" class, in the CSS of which a custom behavior .htc is called which changes the .png extension to .gif if the browser is detected to be one we've marked as a problem. We just include a GIF version of every PNG alongside it in the same path, and if the browser is found to be one that doesn't handle PNGs properly, it swaps it out with a GIF version of the image. We therefore sacrifice the alpha blending in favor of guaranteed full-on transparency and color accuracy, and only do so when we know it's probably not going to look right as-is. It may not be an ideal solution, but it's the nature of cross-browser I suppose. Edit: Actually now that I look at the project in question, we used an .htc behavior for an img class called "alpha" as well which tosses the correct filter on the image automatically. So you're detecting the browser using javascript instead of an IE6-only pure CSS hack, so it might be a little bit more elegant... but it's basically the same thing. For an introduction to how to write DHTML behaviors, try this link.

html - IE6 issues with transparent PNGs - Stack Overflow

html css internet-explorer-6 png
Rectangle 27 0

var options = {
    url: config.getConverter()+"?tenant="+customerId+"&author="+userId+"&name="+fileName+"&ext=ppt",
    method: 'POST',
    formData: {
        my_file: fs.createReadStream(fileLoc)
    },
    headers:{'x-auth-token':token,'Content-Type':'application/vnd.openxmlformats-officedocument.presentationml.presentation'}
};
formData
form

That gives me an invalid request from my server, because it expects an input stream, which it doesn't get when I do the code above.

----------------------------186177887193287547417109 Content-Disposition: form-data; name="6cbd90c5-9e73-439f-8eea-2af77d8e8fdd"

javascript - Corrupt files when uploading from Node - Stack Overflow

javascript node.js image file-upload corruption
Rectangle 27 0

It looks like you are reading data from a WebSocket as a string, converting it to a Blob, and then writing this to a file.

If you have control of the WebSocket server then the best thing would be to send the data as binary frames instead of UTF-8 text data. If you can get the server to send the data as binary frames then you can just tell the WebSocket to deliver the data as Blobs:

ws.binaryType = "blob";
ws.onmessage = function (event) {
    if (event.data instanceof Blob) {
        // event.data is a Blob
    } else {
        // event.data is a string
    }
}

If that is not an option and you can only send text frames from the server, then you will need to encode the binary data to text before sending it from the server and then decode the text on the other end. If you try and send binary data directly as text frames over WebSockets then doing charCodeAt(x) && 0xff will result in corrupt data.

For example you could base64 encode the data at the server and then base64 decode the data in the client:

ws.onmessage = function (event) {
    raw = window.atob(event.data);
}

There is a very well performing pure Javascript base64 decode/encode contained in websockify. It decodes to an an array of numbers from 0-255 but could be easily modified to return a string instead if that is what you require (Disclaimer: I made websockify).

sorry!,Here I have a problem I am doing it in worker so no btoa atob functions allowed. anyway thanks for your response

@rajuk, the web workers specification requires base64 support. If it's missing then that's a bug and you should file a webkit bug: webkit.org/quality/reporting.html

@rajuk: I added an update inline referring to websockify which contains a very fast pure Javascript base64 encode/decode implementation.

javascript - image files corrupt with websocket file transfer - Stack ...

javascript html5 websocket blob html5-filesystem
Rectangle 27 0

You can try following JavaScript code for verifying file type and file size

var uploadedImgType = $('#photo_id').val();
file = data.files[0];
if(uploadedImgType.match(/(?:jpeg|jpg|tif|tiff)$/) && (file.size/1000/1000 < 50)){
  (Do your Stuff);
}else{
  alert("We're sorry but the file " + file.name + " is not in a supported tiff or jpg image file format.  Please select a jpeg (jpg) or tiff file.  Thanks!");
}

Thanks! How can I verify if image file is corrupt before the upload?

I am not sure how to check corrupted/broken file uploading through JavaScript, but you may do this through server side by checking MIME Type of a file type = MIME::Types.type_for(your_file.original_filename).first as written in stackoverflow.com/a/1229600/2230932, please refer this.

How to detect corrupt very large image files with javascript and jquer...

javascript jquery jquery-file-upload
Rectangle 27 0

First of all, why do you want to separate the file into chunks? You can upload the whole file in a go via AJAX. The error that you are encountering might be due to the chunk logic. Try removing the chunk logic and it will work just fine. So your upload function would look something like this:

Instead of chunks, send the full file and it should work. If you are worried about the upload progress, here are a few solutions: jQuery Upload Progress and AJAX file upload , File upload progress bar with jquery

Its because I want this function to upload a large file. which, if not in the chunk, 32 bit server can't upload more then 2gb in total of data.

javascript - PHP - HTML5 API upload corrupted - Stack Overflow

javascript php html
Rectangle 27 0

Ok, I think that the problem is that you are sending mime/multipart encoded data and you just want to send the file as the raw body of the post. There are a couple ways to do this.

This technique is actually streaming the file as the raw post body for your request.

Read the File then Post

var options = {
    url: config.getConverter()+"?tenant="+customerId+"&author="+userId+"&name="+fileName+"&ext=ppt",
    headers:{'x-auth-token':token,'Content-Type':'application/vnd.openxmlformats-officedocument.presentationml.presentation'},
    body: fs.readFileSync(fileLoc)
};

request.post(options, callback);

Here you are reading the file into a string and posting it using the body option. This sets the post body raw rather than using a mime/multipart encoding as you get with formData.

javascript - Corrupt files when uploading from Node - Stack Overflow

javascript node.js image file-upload corruption
Rectangle 27 0

Looking at the answer provided by user470714 on uploading a file in chunks using html5 I found the issues.

Which the ajax didn't actually uploading the chunks in order. So I updated my HTML code as follow and now it works fine :

javascript - PHP - HTML5 API upload corrupted - Stack Overflow

javascript php html
Rectangle 27 0

That's most likely the "best" way. But keep in mind that it's not just alpha-trans that IE6 doesn't implement properly when it comes to PNG files; the color space is corrupt due to IE not implementing the gamma properly, and thus PNG files often show "darker" than they should. One alternative "solution" that we implemented on a recent project was to mark every png image with a "toGif" class, in the CSS of which a custom behavior .htc is called which changes the .png extension to .gif if the browser is detected to be one we've marked as a problem. We just include a GIF version of every PNG alongside it in the same path, and if the browser is found to be one that doesn't handle PNGs properly, it swaps it out with a GIF version of the image. We therefore sacrifice the alpha blending in favor of guaranteed full-on transparency and color accuracy, and only do so when we know it's probably not going to look right as-is. It may not be an ideal solution, but it's the nature of cross-browser I suppose. Edit: Actually now that I look at the project in question, we used an .htc behavior for an img class called "alpha" as well which tosses the correct filter on the image automatically. So you're detecting the browser using javascript instead of an IE6-only pure CSS hack, so it might be a little bit more elegant... but it's basically the same thing. For an introduction to how to write DHTML behaviors, try this link.

html - IE6 issues with transparent PNGs - Stack Overflow

html css internet-explorer-6 png
Rectangle 27 0

<?php
   $destination_path = getcwd().DIRECTORY_SEPARATOR;

   $result = 0;

   $target_path = $destination_path . time() . ".mp3";

   ini_set("upload_max_filesize", "3200000000");

   if(@move_uploaded_file($_FILES['file']['tmp_name'], $target_path)) {
      $result = 1;
   }

   sleep(1);
?>

Thanks for the help (this does still move the file onto the server) but for some reason the file is still corrupted. Any ideas why this might be happening?

maybe it's the max file upload limit try this setting ini_set("upload_max_filesize", "3200000000");

javascript - PhoneGap File Transfer corrupts .mp3 when uploading to se...

javascript php cordova
Rectangle 27 0

var getDataUrl = function (blob) {
      var defer = $q.defer();
      var reader = new FileReader();
      reader.onload = function (e) {
        defer.resolve(e.target.result);
      };
      reader.readAsDataURL(blob);
      return defer.promise;
    };

    file = data.files[0];

    getDataUrl(file).then(function (dataUrl) {
      var uploadedImg = new Image();
      uploadedImg.src = dataUrl;
      if (uploadedImg.width && uploadedImg.height) {
        // image is OK
      } else {
        // Image is corrupted
      }
    });

How to detect corrupt very large image files with javascript and jquer...

javascript jquery jquery-file-upload
Rectangle 27 0

printDropzone.on('processing', function (file, xhr) {
    $.ajax({
        url: '/api/sas',
        type: 'GET',
        async: false,
        success: function (response) {
            var timeStamp = Math.floor(Date.now() / 1000);
            upload = timeStamp + '-' + file.name;
            printDropzone.options.url = response.HostingSite + '/' +upload + response.Token;
            printDropzone.options.method = 'put';
            printDropzone.options.multipart = false;
    }
});

javascript - Files Uploaded Via AJAX to Azure Cloud Storage are corrup...

javascript ajax azure dropzone.js azure-cloud-services
Rectangle 27 0

Thanks to Patrick Evans, it turns out all I needed to do was upload the blob itself:

function upload(file) {
  var offset = 0; // what's been sent already
  var fileSize = file.size;
  var chunkSize = 64 * 1024; // bytes

  while (offset < fileSize) {
    var blob = file.slice(offset, chunkSize + offset);

    var urlToUse = ((offset + blob.size) >= fileSize) ? videoFinishBaseUrl : videoContinueBaseUrl;

    $.ajax({
      url: urlToUse,
      method: 'POST',
      data: blob,
      headers: requestHeaders,
      contentType: false,
      processData: false,
      cache: false,
      async: false,
      success: function(data) {
        jQuery('#uploadmsg').text('Finished offset ' + offset);
        offset += blob.size;
      },
      error: function(err) {
        jQuery('#uploadmsg').text(err);
      }
    });

  }
};

jquery - Javascript: converting binary data in Uint8Array to string co...

javascript jquery ajax encoding base64
Rectangle 27 0

The problem was the base64 meta tag coming in front of the base64 data.

Implementing the below code priorly to the base64 data coming from the reader solved the problem:

data = data.split('base64,')[1];

javascript - Corrupted image files after creating zip file by using Co...

javascript html5 angularjs cordova jszip
Rectangle 27 0

You're sending a multipart request. This means it's not just the raw contents of the single file you're uploading, but a special format that allows for multiple parts where each part is a separate form field (in your case there is only 1 part -- the file form field). You should look into using a module that can parse multipart/form-data requests for you such as busboy, multiparty, or formidable.

In this case I'm receiving just one part, it is a favicon. What I want is parse the multipart and then save the file on the disk without using modules.

Good luck writing a parser.

javascript - Corrupt files/images when uploaded to nodejs - Stack Over...

javascript node.js multipartform-data formidable
Rectangle 27 0

You can try following JavaScript code for verifying file type and file size

var uploadedImgType = $('#photo_id').val();
file = data.files[0];
if(uploadedImgType.match(/(?:jpeg|jpg|tif|tiff)$/) && (file.size/1000/1000 < 50)){
  (Do your Stuff);
}else{
  alert("We're sorry but the file " + file.name + " is not in a supported tiff or jpg image file format.  Please select a jpeg (jpg) or tiff file.  Thanks!");
}

Thanks! How can I verify if image file is corrupt before the upload?

I am not sure how to check corrupted/broken file uploading through JavaScript, but you may do this through server side by checking MIME Type of a file type = MIME::Types.type_for(your_file.original_filename).first as written in stackoverflow.com/a/1229600/2230932, please refer this.

I am also looking for corrupt image file detection from javascript.

How to detect corrupt very large image files with javascript and jquer...

javascript jquery jquery-file-upload
Rectangle 27 0

Seeing the relevant pieces of the HTML would be useful, but it looks like the issue is that you're supplying a FormData object to the upload call, as opposed to the File.

fileData        = new FormData($('#file-upload')[0]),

with this:

fileData        = $('input[type=file]')[0].files[0],

That did the trick, thanks ! But I still don't understand why it needs a File type here because almost every examples I found on the Web were using FormData objects like this (very) popular question: stackoverflow.com/questions/166221/

javascript - Corrupted files when uploading to Dropbox via Ajax - Stac...

javascript ajax dropbox dropbox-api
Rectangle 27 0

var length = fs.statSync(fileLoc).size;
    console.log('length is',length);
    var req = request.post({uri: config.getConverter()+"?tenant="+customerId+"&author="+userId+"&name="+fileName+"&ext=ppt",
        headers:{
            'x-auth-token':token,
            'Content-Type':'application/vnd.openxmlformats-officedocument.presentationml.presentation',
            'content-length':length
        }
    });
    fs.createReadStream(fileLoc).pipe(req).pipe(process.stdout);

javascript - Corrupt files when uploading from Node - Stack Overflow

javascript node.js image file-upload corruption
Rectangle 27 0

There is no way to detect a corrupt image in either javascript or vbscript - you will need to try using ASPImage.Image directly.

It has an Error property, this will probably have an error detailing that a corrupt file has been loaded - did you try that? That is, if it is populated, chances are that the file was corrupt.

Additionally, the LoadImage method returns a boolean - I assume it will return false if the image couldn't be loaded due to corruption.

vbscript - Detecting corrupted jpg files before or during upload - Sta...

file-upload vbscript asp-classic jpeg