Issue with uploading files using the Cordova file plugin

Encountered a status 500 error when attempting to upload a file to the server.

Error: https://i.sstatic.net/TcTTL.png

Using an API to post data to the server, the Postman test is successful. However, integrating it into my project results in the aforementioned error. https://i.sstatic.net/hV6MR.png

The data passed to the API in my project for posting to the server: https://i.sstatic.net/qSb0I.png

Calling API: The File data is stored under data.image1.file. https://i.sstatic.net/VJWhn.png

orderProofDeliver: A POST API request with a shortened URL link (). Unable to provide code snippet as it resides on another virtual machine that I cannot access. https://i.sstatic.net/lD2Fb.png

Error: The formData sent includes temporarily linking img1 and img2 to the same image. Server response code is 200, but image file cannot be found.

https://i.sstatic.net/GtdAU.png https://i.sstatic.net/eAFU4.png

angulartypescriptionic-frameworkcordova-plugins

Answer №1

The issue does not lie within Cordova itself, but rather in the way data is passed to the API. To resolve this, it is essential to utilize the FormData API in the browser to pass data effectively. Ensure that data is appended correctly before sending it within the body.

Updated Code Snippet

orderProofDeliver(data): Observable<boolean> {
    let headers = new Headers();
    const formData: FormData = new FormData();
    formData.append('orderId', data.orderId);
    formData.append('img', data.image1.file, data.image1.name);
    formData.append('img2', data.image2.file, data.image2.name);
    return this.http
      .post('destination-url', formData, { headers });
}

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

What is the process for exporting a class to a module and then importing it into another module using TypeScript within an Angular environment?

I have a class called IGeneric that is exported to module A and imported into module B. However, I am unable to use this exported class in module B. Please note that the exported class is not a component, directive, or service; it is a plain TypeScript cl ...

angulartypescriptangular2-formsng-modules

Encountering a memory issue while trying to read and display Excel data in an Angular 2 application

Currently, I am working on an asp.net web API that utilizes OpenXML SDK for Excel to read data from an Excel file and display it in an Angular2 application. The dataset consists of approximately 70,000 rows that need to be displayed all at once without any ...

c#excelangularobservableopenxml-sdk

Adding an item to a list using the PATCH method in Angular 7

Can anyone provide guidance on how to implement the PATCH method for manipulating an array within another array? ItemClass: export class ItemClass { constructor(public person: string, public name: string, public quantity: number, public price: number){} ...

angulartypescriptrestapi

Issue with button functionality in Angular 7 carousel slider

My latest project involved creating a basic piece of HTML code that includes a Bootstrap carousel. Here is the code snippet: <!--The content below is only a placeholder and can be replaced.--> <head> <link rel="stylesheet" href="https://s ...

jqueryhtmlangularbootstrap-4

Bar chart in Highcharts vanishing following the update from version 10.2.1 to 10.3.1

I've been in the process of updating my highcharts to the latest version, but I've hit a roadblock. Specifically, I have a bar chart set up with the following configuration: { chart: { type: 'bar', ...

javascripttypescripthighchartsbar-chart

The CORS policy specified in next.config.js does not appear to be taking effect for the API request

I am currently working on a Next.js application with the following structure: . ├── next.config.js └── src / └── app/ ├── page.tsx └── getYoutubeTranscript/ └── getYoutubeTranscript.tsx T ...

javascriptnode.jstypescriptnext.jscors

Angular Material Tooltips

Seeking help on showcasing an array of elements in a list format using mat-angular tooltip. This code snippet belongs to app.component.html <button mat-raised-button matTooltip={{items}} aria-label="Button that displays a tooltip when focu ...

angulartypescriptangular-material

Access data in an array using a specific index in Typescript

Here is the JSON format I am working with: { "records": [ { "ID": "4", "TYPE": "landscape", "FIMAGE": "viewveni.jpg", "COUNT": "4444" } ], "pagination": { "count": 1, "page": 1, "limit": 10, "totalpages": 1 } } I'm facing a challenge trying to retri ...

javascriptarraystypescript

Using masonry-layout with Next Js leads to a ReferenceError stating that window is not defined

Implementing the masonry-layout library by David Desandro in my Next app has been a smooth process. You can find the link here. When I apply it, the masonry layout functions perfectly as intended. Here's how I'm incorporating it successfully: imp ...

reactjstypescriptnext.js

Decoding java.util.Date in Angular 2

Struggling with Java dates has been a long-standing challenge for me. Recently, I came across a date format like this: 1998-01-05T00:01:00+01:00 Is there a method to retrieve the first 10 characters without altering the original string? I've heard t ...

javadateparsingangular

Tips for creating a specific type for a generic class constructor in TypeScript or incorporating generics with utility types

Within my code, I have a registry that stores class constructors and is used to create instances of these classes. To make it possible for the registry to handle any class that extends Base, I implemented a generic class called Registry which infers its re ...

typescript

Merge two attributes into a single entity using RxJS

Currently, I am working on handling HTTP responses in the Angular framework and I have a requirement to merge two properties using rxjs. Let's consider a sample response from an API where I need to combine the age with birthday. Since the HTTP respon ...

angularrxjs

The hyperlink tag doesn't respond to clicks in Safari, yet functions properly in all other web browsers

I'm encountering an issue with my header drop-down menu in Safari—it works perfectly in Chrome, but when I try to open the drop-down menu in Safari, it's unresponsive. Clicking on it does nothing, preventing me from accessing other drop-downs. ...

htmlcssangularsafaricpanel

Creating a preview of a document with client-side scripting

I have been developing a feature that requires generating a preview in a popup for various file formats including PDF, Word, and Excel. I was able to achieve this by converting the files using Aspose.Words and Aspose.Cells. Here is the code snippet: publ ...

javascriptjqueryasp.net-mvcangularaspose

Import a JSON file into Angular 8 and parse its contents

My code is intended to read and upload a JSON file (ARM template), but I am encountering an issue where this.updateObj appears as undefined in the console.log. Below is my code: onChange(fileList: FileList): void { var file = fileList[0]; var fileR ...

javascripttypescriptangular8

Tips for displaying <mat-autocomplete> when the input field is clicked

Currently, I am using a material autocomplete form that is linked to an input with Angular 8. As a beginner in Angular, I am still in the process of learning. Despite trying several solutions found on StackOverflow, such as Material autocomplete not displ ...

angularangular-material

Issue with vertical cell alignment in MUI x-data-grid persists following the latest update to version 7.2.0

After updating my MUI app to the latest npm packages version, specifically upgrading x-data-grid from 5.17.9 to 7.2.0, I encountered an issue. In my application, I utilize a grid where certain columns are populated using the renderCell property: const cel ...

cssreactjstypescriptmaterial-ui

What is the process for creating a map in which the value type is determined by the key type?

Is it feasible to formulate a Map<K, V> in a manner where the type of the value relies on the type of the key, without explicitly specifying the key's type upon initializing the map? For instance: abstract class BaseA { a() {} } class ConcreteA1 ...

typescripttypescript-generics

Utilizing CSS in Angular applications

I am currently working on an Angular 2 application and I am fairly new to Angular. I am facing an issue where my CSS does not seem to be applying properly. There are three key files involved: landing.component.html landing.component.scss landing.compone ...

cssangular

What is the proper method for specifying the path to my index.tsx file within a React application?

After using npx create-react-app my-app --template typescript to generate my React app, I decided to reorganize the files by moving them to /src/client and relocating my Express backend to /src/server. However, upon running the relocated React app, I encou ...

reactjstypescript