I have a Django Rest API for adding multiple images to a database. I am using React JS as my client side and to need to upload multiple images. I am using
this component for uploading images in the client side.
https://ant.design/components/upload/
When calling the Django REST API, it shows the error "the submitted data was not a file. Check the encoding type on the form."
Related
I am currently working on a application with React as frontend and Nodejs as backend.
I am using multer and minIO to store the files.
Currently:
I have a form where the user fills up some data and also has the option to upload files such as PDF/JPEG etc (multiple input fields for file).
I am using forkmik along with material UI for validation and styling.
So when a user fills up the form (data is a json object), if there is any file upload done it does a POST request to "/upload" uploads the file to the storage engine and then returns a path of where the file is stored.
Then I send one more POST request to "/" to save the user info along with the path that it returned earlier onto MongoDB.
I trying to make it as a single post request to "/" but cannot do so, this is what I have tried,
is to send the user info with content-type "multipart/form-data" along with the files, I am only able to get the "req.files" array properly while the "req.body" of the user information is shown as "[Object: null prototype] { 'values.general_information.first_name': 'Amy',
'values.general_information.last_name': 'John' }" and so on.
I am trying to receive it in a proper json format but cannot do so.
Since the data I was receiving was [Object: null prototype], in the body converted to string using JSON.stringify() and on the backend parsed the incoming data using JSON.parse(), without using react FormData and was able to make it into a single POST request using multipart/form-data as I was uploading files as well.
I'm using React JS to DownloadDocument through Rest API. API Returning to me
Rest API in Dot Net Core -
Stream stream = DownloadDocument(accessToken);
string mimeType = "application/pdf";
return File(stream, mimeType, "DC_Signed.pdf");
Now in React JS, we have to Read/Download Documents and Upload them on Third Party API i.e SharePoint
Any suggestions or ways to do that?
My goal is to upload image from reactJS web-app to s3 via api-gateway using lambda with written in python.
React code to upload image via API gateway:
profile.image_upload just does ajax post.
My first question is FormData a right way to send a image?
I configured API-gateway (IMAGE_API above) to handle requests from uploadImage function. When I print event['body'] in lambda, I get something like below. I am not sure how to process this before I can upload to s3
------WebKitFormBoundary0baBvYH7cO2cFBaY\r\nContent-Disposition: form-data; name="image"; filename="e0fd34cb-e7a1-4fd9-8f44-9fe26b06d9e8.jpg"\r\nContent-Type: image/jpeg....
I am trying to integrate swagger to my application to document my rest APIs.
My application is not Maven dependent so I included all required jars manually.
After changes have been made, hitting /v2/api-docs doesn't return any JSON output but a 404 response instead.
Hitting /swagger-ui.html a page with swagger header prompts an alert box continuously with a message saying:
"Unable to infer base url. This is common when using dynamic servlet registration or when the API is behind an API Gateway. The base url is the root of where all the swagger resources are served. For e.g. if the api is available at http://example.org/api/v2/api-docs then the base url is http://example.org/api/. Please enter the location manually:
Thank you.
That question has a lot of articles around the web discussing it, but given how recent I am to web dev I think I am missing a few pieces to get the full picture.
My understanding is as follows:
Let us assume we have a Node.js server and we're using express for our web app. Client rendering is when I don't enter a URL in the web browser that creates an HTTP request to my server. Instead, the client requests comes from a JS script(that was loaded from the server initially when I accessed the application using the root route for example: http://localhost:SOME_PORT/). So, let's say my request is to fetch some information about a certain user from a database. Instead of going through the server, the JS script(using AJAX) for example does an XMLHTTPRequest directly to the database(say I trigger this by a button called Fetch) instead of going through my server and then the client(the browser) will get a response and in turn will create an HTML document and render it. As opposed to server-side rendering, where I for example enter a URL in the browser, and the server intercepts the request, and prepares the HTML document along with the data requested(if any) and sends it back in HTML form for the browser to render(hence server-side, no work was done on the client-side but actually displaying the page).
Is this accurate? What am I missing in my understanding of both and when to utilize either style?
Let us assume we have a Node.js server and we're using express for our web app.
It doesn't really matter what software you use on the server, but we'll use that for the example.
Client rendering is when I don't enter a URL in the web browser that creates an HTTP request to my server. Instead, the client requests comes from a JS script (that was loaded from the server initially when I accessed the application using the root route for example: http://localhost:SOME_PORT/).
That would have loaded an HTML document which loaded the JS with a script element. You wouldn't load the script directly.
So, let's say my request is to fetch some information about a certain user from a database. Instead of going through the server, the JS script(using AJAX) for example does an XMLHTTPRequest directly to the database
No. You still make an HTTP request to the HTTP server.
(say I trigger this by a button called Fetch) instead of going through my server and then the client(the browser) will get a response and in turn will create an HTML document and render it.
Ish.
The client already has an HTML document. With client side rendering, the DOM generated from that document is modified (usually with new data requested from the server).
As opposed to server-side rendering, where I for example enter a URL in the browser
To keep the scenario as close to the Client-side rendering example as possible, let's say you click a link instead of entering a URL.
, and the server intercepts the request,
The request is explicitly made to the server, it isn't intercepted. That would imply it was intended for somewhere else.
and prepares the HTML document along with the data requested(if any) and sends it back in HTML form for the browser to render(hence server-side, no work was done on the client-side but actually displaying the page).
Basically.
The short version is:
With server side rendering, a complete HTML document is prepared on the server and delivered to the browser.
With client side rendering, the DOM is manipulated on the client to produce the same document.