Скачать или смотреть How to Send Function Parameters with the Fetch API in JavaScript

Learn how to easily send additional parameters such as filenames when using the Fetch API to upload blobs in JavaScript and PHP.
---
This video is based on the question https://stackoverflow.com/q/66196695/ asked by the user 'lopm46' ( https://stackoverflow.com/u/13583589/ ) and on the answer https://stackoverflow.com/a/66196796/ provided by the user 'Jakub Dóka' ( https://stackoverflow.com/u/13995311/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Send function parameters with fetch api

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
How to Send Function Parameters with the Fetch API in JavaScript

When working with the Fetch API in JavaScript, you might find yourself in a situation where you need to upload files or data to a server while passing additional parameters along with it. A common scenario involves saving a generated PDF blob to the server with a specified filename. In this guide, we'll explore how you can achieve this seamlessly.

The Problem

You have a JavaScript function that uploads a PDF blob to a PHP server. However, you also want to include a filename for the PDF so that it saves correctly on the server. The initial setup allows you to save the PDF but lacks a way to specify its filename. Here's how you can enhance your function to send the filename effectively.

The Solution

Step 1: Modify the JavaScript Function

To transmit the filename alongside the blob during your fetch request, you need to include it as a URL parameter. Here's how you can adjust your existing function:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Changes:

URL Encoding: We use encodeURIComponent(fileName) to ensure that the filename is safely transmitted in the URL, avoiding issues with special characters.

Get Request: The filename is added as a query string parameter in the URL, which the server can read later.

Step 2: Adjust the PHP Script

Next, you need to make some changes to your PHP script (upload.php) to read the filename from the request and save the blob data with that filename:

[[See Video to Reveal this Text or Code Snippet]]

Explanation of Changes:

Reading Filename: The PHP script now retrieves the filename from the URL using $_GET["fileName"], allowing you to save the blob data with the desired name.

File Storage: The script saves the incoming blob data with the specified filename in the designated directory.

Important Note:

Make sure that the directory where you're saving the files (in this case, /pdf/) has the appropriate permissions for writing. This ensures that your server is able to create and save the PDF files correctly.

Conclusion

By following the steps outlined above, you can effortlessly send additional parameters when using the Fetch API in JavaScript. By making slight adjustments to both the client-side and server-side code, you can ensure that your generated PDFs are saved with the correct filenames on the server. This not only improves your application but also enhances user experience by providing meaningful file names.

Feel free to reach out if you have any further questions or if you encounter any issues while implementing this solution!