Files are corrupted when upload image files and .x

Question

To upload files into server i used ng-file-upload.In there i send files as form multi part.Also can upload multiple files to server.So far it is working with text,xml and csv files.I am not sure if i did some mistake to enable other format as well like jpeg,png and .xlsx file format.

Here is my front end code snippet.

<div class="input input-file  "><span class="button"><input  name="files[]"  ngf-select multiple accept="text/csv/xlsx/xls" ngf-pattern=".txt,.xml,.xls,.csv,.xlsx" ngf-max-height="1000" ngf-max-size="10MB" type="file" id="tattachments"name="file"  ng-model="MODEL_COL_FIELD" onchange="this.parentNode.nextSibling.value = this.value">Browse</span>
  <input
  ng-class="\'colt\' + col.uid" ui-grid-edit-file-chooser id="attachments" type="text" placeholder="Select some files (optional)" readonly="">
</div>

I enabled following ng-file upload directives as like accept="text/csv/xlsx/xls" ngf-pattern=".txt,.xml,.xls,.csv,.xlsx"

Request Header Details

Content-Disposition: form-data; name="files[0]"; filename="sampleFile.xlsx"
Content-Type: application/vnd.openxmlformats-officedocument.spreadsheetml.sheet

I am not sure if i did any mistake here.

Back end code snippet to save the files into DB

private FilesAttachment addFileAttachment(String fileName,
            String fileContent, String mimeType) {

        FilesAttachment attachment = new FilesAttachment();
        byte[] stream = fileContent.getBytes();
        attachment.setData(stream);
        attachment.setTimestamp(Calendar.getInstance().getTime());
        attachment.setSize(stream.length);
        attachment.setFilename(fileName);
        attachment.setDescription(fileName);
        attachment.setMimetype(mimeType);



return attachment;
}

JS code snippet

var promise= Upload.upload({
                        url: REST END point URL,
                        data: {
                        files: attachments, //File list contains selected files
                        'message':message,
                        'userName': userName
             }}).then(function (response) {
                 etc ...
             }

Then i tried to access files that i have uploaded but i cant open them.Please let me know what i did wrong.

Answer 1

I was also having the same issue while using Upload.upload(). The uploaded files were getting corrupted. So I changed my code as below and issue got resolved.

The key point here is to use transformRequest: []. This will prevent $http with messing with the file.

      function getFileBuffer(file) {
            var deferred = new $q.defer();
            var reader = new FileReader();
            reader.onloadend = function (e) {
                deferred.resolve(e.target.result);
            }
            reader.onerror = function (e) {
                deferred.reject(e.target.error);
            }

            reader.readAsArrayBuffer(file);
            return deferred.promise;
        }

        function ngUploadFileUpload(endPointUrl, file) {

            var deferred = new $q.defer();
            getFileBuffer(file).then(function (arrayBuffer) {

                $http({
                    method: 'POST',
                    url: endPointUrl,
                    headers: {
                        "accept": "application/json;odata=verbose",
                        'X-RequestDigest': spContext.securityValidation,
                        "content-length": arrayBuffer.byteLength
                    },
                    data: arrayBuffer,
                    transformRequest: []
                }).then(function (data) {
                    deferred.resolve(data);
                }, function (error) {
                    deferred.reject(error);
                    console.error("Error", error)
                });
            }, function (error) {
                console.error("Error", error)
            });

            return deferred.promise;

        }