What is the process for uploading a file in binary format using the ng-file upload library in AngularJS?

While trying to upload a file to Amazon S3 Bucket using a pre-signed URL from AngularJs, I encountered an issue where the zip file ended up getting corrupted. Interestingly, everything worked as expected when I uploaded the file from Postman in binary format.

https://i.sstatic.net/xVuBd.jpg

The problem seems to be related to the ng-file-upload library in AngularJs. Upon downloading, each file contains a web-kit form boundary appended at the beginning, causing the corruption like shown here:

https://i.sstatic.net/Q5iEh.jpg

If we manually remove this web-kit form boundary and try to open the file again, it opens perfectly fine.

Answer №1

Recently, I encountered a similar issue and had to think outside the box to find a solution. My workaround involved creating custom code for sending files via HTTP requests. Here is an example that you can use:

function azureChangeFn() {
var inputElement = document.getElementById("fileSelect");
var newFile = inputElement.files[0];
var url = "https://YOUR_STORAGE_NAME.blob.core.windows.net/CONTAINER_NAME/"+ newFile.name +"GENERATED_SharedAccessSignature_FROM_AZURE_SITE";

var xhr = new XMLHttpRequest();
xhr.addEventListener("progress", updateProgress);
xhr.onreadystatechange = function() {
if (xhr.readyState == XMLHttpRequest.DONE) {
alert("Sent to azure storage service!");
}
}
xhr.open('PUT', url, true);
xhr.setRequestHeader("Content-type", "multipart/form-data");
xhr.setRequestHeader("lng", "en");
xhr.setRequestHeader("x-ms-blob-type", "BlockBlob");
xhr.setRequestHeader("x-ms-blob-content-type", newFile.type);
xhr.send(newFile);
}

function updateProgress (oEvent) {
  if (oEvent.lengthComputable) {
var percentComplete = oEvent.loaded / oEvent.total;
console.log(percentComplete);
  } else {
alert('FAIL');
  }
}
<html>

<head>
</head>

<body>
<label>Example without library:</label>
<br>
<label>Select file: <input type="file" id="fileSelect" onchange="azureChangeFn()"></label>


</body>
</html>

Regarding the ng-file-upload library, upon reviewing the source code, it was discovered that the formData.append method automatically adds a web-kit header when appending a file. It appears that FormData is typically used for POST methods, but in this case, all body content is treated as a file during a PUT request. Unfortunately, attempts to upload a file to Azure storage using a POST method were unsuccessful.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Best Practices for Iterating over Nested Objects and Arrays Using ng-repeat

I've been trying to use Angular's ng-repeat, but nothing seems to work for me. I'm attempting to loop through companies.users and display all the first names. Any assistance would be greatly appreciated! Thank you! <div ng-app="app" ng-c ...

Is getElementById in JavaScript reliable for multiple calls?

I am attempting to create a table cell that transforms into a textbox upon clicking, allowing for input to be entered and then displayed in the cell. Below is my JavaScript function: $(".cellConsigne").click(function () { var numId = this.id.substrin ...

Utilizing JavascriptExecutor in Powershell

I've been working on a series of Powershell scripts that utilize the Selenium Webdriver. Now, I am looking to incorporate some JavaScript functionality into one of them. However, I am struggling to understand how to get the syntax right. I tried ada ...

Pattern matching to find occurrences of their, their's, theirs, theirs, and theirs' using regular expressions

I am attempting to create a regex in JavaScript that matches the different forms of "their" and its possessive form. Currently, I have their|their(?:'?s), which successfully matches their, theirs, and their's; but does not match theirs'. C ...

Generating a React User-Object in JSON Format

Imagine there is a back-end system using Node.js that allows the creation of users with specific attributes as shown below: POST http://localhost:8080/user Authorization: {{adminToken}} Content-Type: application/json { "userID": "test" ...

Unable to load CSS background image

As I develop a website for a fictional company to enhance my skills in HTML, CSS, and JavaScript, I am encountering an issue with loading my background image. If someone could review my code to identify the problem, I would greatly appreciate it. Check ou ...

Feeling puzzled about the next() function in Node.js?

https://github.com/hwz/chirp/blob/master/module-5/completed/routes/api.js function isAuthenticated (req, res, next) { // If the user is authenticated in the session, call the next() to proceed to the next request handler // Passport adds this met ...

The Typescript function unexpectedly returns a NaN value even though it should be returning a

Having an issue with my countdown timer function: startTimer(duration) { this.myTimer = duration; setInterval(function () { this.myTimer--; console.log("TIMER: " + typeof(this.myTimer) + " " + this.myTimer); }, 1000); } When I ...

Oops! Looks like the module "@google-cloud/vision" hasn't been loaded in this context yet. Make sure to use require([]) to load it before proceeding

Encountering an issue with the error message Module name "@google-cloud/vision" has not been loaded yet for context: _. Use require([]) while running my project. I have included require.js in my project and added the script tag in my HTML file <script d ...

Unable to resolve the issue with mongoose's model overwrite error

Recently, I implemented the angular-fullstack generator and introduced a Model called person. However, upon attempting to require the person model in the seed.js file, an error is triggered. /Users/dev/wishlist/node_modules/mongoose/lib/index.js:334 ...

Efficiently transferring data to S3 using multiple threads

While working on my spring application, I encountered an issue when uploading files to s3 using the s3 AWS client. Occasionally, I receive the error message: com.amazonaws.SdkClientException: Unable to execute HTTP request: Timeout waiting for connection f ...

Encountered an issue when deploying a Gatsby JS site on Netlify due to a non-zero exit code returned by the build script

Recently, I discovered Gatsby JS (https://github.com/gatsbyjs/gatsby) and chose to construct my portfolio website using this generator. To begin, I forked their default starter site (gatsby-starter-default) and developed my portfolio from there (https://g ...

Managing traffic in Google Kubernetes Engine (GKE)

I am encountering an issue with our website deployment on GKE, which consists of 10 pods. When deploying a new version, we use MAXsurge=1 and MAXunavailable=0. Upon trying to access the website during a new deployment, I sometimes only see the header in t ...

Django displaying GET method as Forbidden 403 error

Currently, I am attempting to utilize AJAX to send form data to an application. Here is the Javascript section: function submit_changes() { var all_data = [A_list, B_list, C_list] $.ajax({ type: "POST", url: "/my_url/", contentType: "applicat ...

The ng-if directive seems to be causing issues within an ng-repeat loop when used in conjunction with bind-html

Below is the code I am using to bind html in my webpage: <div bind-html-compile="menuButtonView"></div> This is the code in my controller: dashboardService.getTemplateMetaData(data.templateCategory) .success(function(data) { console.lo ...

Utilize AngularJS binding to pass a JavaScript object seamlessly

I am trying to use AngularJS bindings to pass an object with multiple string values to another component. const personName = { firstName: this.conversation.customer.firstName, lastName: this.conversation.customer.lastName }; const template = ` ...

Implementation of Gallows Game

SITUATION Recently, I took on the challenge of creating a "HANGMAN" game using JavaScript and HTML exclusively for client-side machines. The logical part of the implementation is complete, but I am facing a hurdle when it comes to enhancing the aesthetics ...

What is the best way to incorporate modules into the client side of TypeScript projects?

I'm currently developing a TypeScript project for client-side JavaScript code. Prior to using TypeScript, I used to import a module in vanilla ES6 JavaScript like this: import * as THREE from 'https://threejs.org/build/three.module.js'; H ...

Issue with sending data to the server via API using AngularJS controller

I am a beginner in angular js and I am attempting to POST data to the server using an API that I have created: function addmovie_post() { { $genre = $this->post('genre'); $cast = $this->post('cast'); $director ...