The functionality of FormData in Expo CLI React Native seems to be experiencing some issues

I recently encountered a problem with the document upload feature in Expo CLI - React Native. The issue is that the file is not being transmitted to the backend as expected using FormData(); instead, it is arriving in a strange array format that is different from how it works on the website. I have the same endpoint connected to a React JS project and it functions properly, delivering the documents correctly in the browser.

However, I am not sure what is causing the issue with FormData here. I also attempted to use react-native-fs, but it is not compatible with Expo. Below is my code:


let formData = new FormData();
formData.append('file', doc);
let token = this.props.user.token;
let header = { headers: { 'Accept': '*', 'Authorization': 'Bearer '+token, 'Content-Type': 'multipart/form-data' } };

let res = await axios.post(BackendURL+'/porta/files/upload/'+document.projectDocumentId, formData, header);

if(res.data.success === true){
    alert('File uploaded successfully');
    this.props.ReloadData(true);
}
console.log(doc);

Answer №1

The issue has been successfully resolved by identifying and fixing the problem in the header section. Specifically, I removed the content type and accept headers as shown below:

let formData = new FormData();
formData.append('file', {
    name: doc.name,
    uri: doc.uri,
    type: "application/pdf"
});
this.props.loadingStatus(true); 
let token = this.props.user.token;
let header = { headers: {  'Authorization': 'Bearer '+token } };
let res = await axios.post(BackendURL+'/portal/files/upload/'+document.projectDocumentId, formData, header);

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

The x-axis values in Amchart are transitioning rather than shifting

I'm facing an issue with my x-axis values as I'm using real-time amcharts. The x-axis values change every 3 seconds, but instead of smoothly moving, they abruptly change to the next value. I would like it to slide smoothly like this example: htt ...

Modify parent component state when input in child component changes in React

I am working on a parent component called NewPetForm: class NewPetForm extends React.Component { state = { name: '', age: '', animal: '', breed: '' }; render() { ...

Check to see if a guest has shown support or followed an outside party

When you already follow a company on Twitter, the "Follow Us" button of that company will automatically turn grey, regardless of the domain. So, how can you determine if User-X is following companies A, B, and/or C based on their Twitter handles? The same ...

Struggling to properly test the functionality of my NgForm call in Angular2+

I've been trying to test the login functionality by inputting username and password in an NgForm, but I keep encountering unsuccessful attempts. Is there a vital step that I may be overlooking? Currently, I'm facing this error message: Chrome 6 ...

Unable to Retrieve JSON Output

PHP Code: $contents = ''; $dataarray = file('/location/'.$_GET['playlist'].''); //Loading file data into array $finallist = ''; //Extract Track Info foreach ($dataarray as $line_num => $line) //Loopin ...

I am having trouble getting ng-change to work. Can someone explain how to properly implement ng

I am facing an issue where the ng-change function is not working for obtaining the team_id and team name. Can someone suggest a more efficient solution to resolve this problem? <th style="width:20%"> <select style="height: 40px; fon ...

Is there a way for me to retrieve the values of <td name="pname"> when the Edit button is

When the button is clicked, I use jQuery to add items in a td that I have created. $("#ddproduct").click(function () { $('#prodcuttable tr:last').after('<tr><td name="pname">' + prodName + '</td> <t ...

How to conceal a Card component using v-if in Vue.js?

Does anyone know how to hide the Card when the third element of the select box is selected? I am a new developer and would appreciate any help with this issue. Sorry for my lack of experience. <b-form-select v-model="InputRatingPlate.RatingP ...

One method for assigning a unique identifier to dynamically generated buttons with jQuery

<table border="0" class="tableDemo bordered"> <tr class="ajaxTitle"> <th width="2%">Sr</th> <th >SM</th> <th >Campaign</th> <th >Day1</th> <th >Da ...

Is the length of a complex match in Angular JS ng-if and ng-repeat greater than a specified value?

In my code, there is an ng-repeat that generates a table based on one loop, and within each row, another cell is populated based on a different loop: <tbody> <tr ng-repeat="r in roles | limitTo: 30"> <td>{{r.name}}</td> ...

During the for loop, a string variable with the prefix "undefined" is

I'm currently working with a drop-down menu where I use the .Change() function to trigger a specific action. This action involves obtaining data using the getJSON method and then creating an array string for an mp3 file based on that data. The code b ...

I'm struggling to make the Perspective Camera track the player's movement. The Camera seems glued to the World origin

As a newcomer to THREE.js, I decided to create a Mini Game for learning JavaScript and THREE.js. In this game, players can explore space and various space objects (still a work in progress). One issue I encountered is that when the scene and objects are r ...

Display routes in React using the react-router package

Can I use a console command at runtime to display all routes in my application? Despite utilizing react-router, not all routes seem to be functioning properly. In Rails, you can retrieve a list of routes during runtime. ...

A guide to submitting forms within Stepper components in Angular 4 Material

Struggling to figure out how to submit form data within the Angular Material stepper? I've been referencing the example on the angular material website here, but haven't found a solution through my own research. <mat-horizontal-stepper [linea ...

Unable to save and subsequently recover the image

Utilizing the sketchViewModel for editing layers, I follow this particular logic: Upload the basic model; Edit the model; Save the edited model to localStorage; Upload the model from localStorage. However, upon uploading the model from local storage and ...

While attempting to upload a file in my Mocha Node.js test, I encountered the message: "Received [Object null prototype] { file: { ... }}"

Everywhere I find the solution in white : app.use(bodyParser.urlencoded({extended: true})); I can use JSON.stringify(req.files) However, I am sure there is a way to fix my problem. My Mocha test : it('handles file upload', async function () { ...

Avoiding multiple ajax requests due to multiple clicks

I have a blog on WordPress that has a jQuery code allowing users to click a bookmark link to save the post as a bookmark. Each post displays a total bookmark counter in this format: "Bookmarked (5)". The issue is that when a user clicks multiple times on t ...

What is the top choice for creating a shallow copy of an array

While delving into the vue source code today, I stumbled upon a method of writing that left me puzzled. view source const deduped = [...new Set(pendingPostFlushCbs)] My initial thought is that it is a shallow copy of the array. But why is there a need t ...

Triggering Events with Angular Checkboxes

I'm having trouble getting a console log to trigger when the user checks one of the checkboxes. The script is working fine for everything else, but checkbox clicks are not registering any events. Any suggestions on why this might be happening? (Just ...

Error: Trying to dispatch from an undefined property in Angular and Redux

In the process of developing a Shopping app using Angular + Redux, I encountered an issue. When attempting to trigger the "ADD_PRODUCT" action on click through a dispatcher function, I keep running into the error message: ERROR TypeError: Cannot read prop ...