How can the AWS S3 JavaScript SDK encode file keys that contain spaces as %20? Any solutions utilizing endpoint parameters to address this issue?

One dilemma I am facing is with a form that allows users to upload files with any name. However, when trying to display this name as a download link later on, issues arise with characters like spaces being replaced by '%20' by AWS, leading to poor user experience.

To learn more: https://docs.aws.amazon.com/AmazonS3/latest/userguide/object-keys.html

During the upload process, I use the following parameters

s3.upload(uploadParams, function(err, data) {

  const uploadParams = {
    Bucket: req.params.bucketname,
    Key: req.headers.filepath,
    Body: ""
  };

For downloading, I utilize the following parameters

s3.getObject(bucketParams, function(err, data) {

  const bucketParams = {
    Bucket: req.params.bucketname,
    Key: req.headers.filepath,
  };

As someone new to AWS, I am uncertain of the best approach to tackle this issue. While attempting to use Content-Disposition did not yield results, my next plan is to store the filename in my database alongside the file URL. This way, when retrieving the fileBody, I can display it using the previously saved filename.

Answer №1

Utilize the pre-existing javascript method decodeURIComponent(string). This function is designed to decode all instances of %xx encoded characters into their corresponding UTF-8 characters.

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

Using a JWT to access a private page after logging in functions properly on Postman, however, it is not working on

I've been working on a small register/login project using Node for the backend, and everything seems to be in order when testing with Postman. For the frontend, I'm using EJS views. The registration process and login function independently work f ...

Displaying the Inertia ProgressBar beneath the Appbar in React MUI

In my app.js file, I have initialized an inertia progress bar. app.js import React from "react"; import { render } from "react-dom"; import { createInertiaApp } from "@inertiajs/inertia-react"; import { InertiaProgress } from "@inertiajs/progress"; c ...

JavaScript - Attempting to insert a value into a text field by clicking a button

I am struggling to get my function to properly add the value of the button to the text field when clicked by the user. HTML <form name="testing" action="test.php" method="get">Chords: <textarea name="field"& ...

JavaScript confirm function fails to validate a required field validator

Utilizing the required field validator to validate a text box and prompting for confirmation on the click of a submit button using the confirm() function in JavaScript has posed a challenge. Upon pressing OK in the confirmation box, the page refreshes an ...

Leveraging JQuery for form submission

My webpage contains a form with the following structure: <form action="/" method="post"> <select id="SelectedMonth" name="SelectedMonth"> <option>7/1/2017</option> <option>6/1/2017</option> </select> </form> ...

Detecting browser reload in React/Typescript: A guide

Is there a way to determine if the browser has been reloaded? I've explored various solutions, but most suggest using code like this: const typeOfNavigation = (performance.getEntriesByType("navigation")[0] as PerformanceNavigationTiming).type ...

Struggling to effectively use XPath to target LI elements that contain specific text

Below is the HTML code for the list item in question: <li class="disabled-result" data-option-array-index="1" style="">4" (0)</li> Here is my attempt at using JavaScript to hide this list item, but it's not working as expected: var xpat ...

How can I resolve a 404 error in JavaScript when trying to run a PHP script using XMLHTTPRequest and the file path is not found?

Every time I click the button on the user interface to trigger the Javascript communication with PHP in order to display a "Hello world" page, I keep receiving a "{"timestamp":"2021-06-10T20:14:59.671+00:00","status":404,"error":"Not Found","message":"","p ...

Refresh the settings and display the view

I have a dilemma where my view is only rendered after an axios request completes, but I actually need the view to load first. Then, once the request is complete, I can pass the parameter to the already loaded view. Currently: app.get('/', funct ...

Ways to track changes in network status within react components

Monitoring network status can be done through two event listeners: 1. window.addEventListener('online', console.log('Online')); 2. window.addEventListener('offline', console.log('Offline')); The challenge lies in k ...

The AngularJS $filter(date) function is causing incorrect format outputs

Hey there! I've come across an issue with my AngularJS filter, where it's supposed to return a date in a specific format. However, when I try the following code: var input = '2015-08-11T13:00:00'; var format = 'yyyy MMM dd - hh:mm ...

Does using req.params in an Express.js route without any validation pose a security risk?

Is it considered a security risk to directly use the req.params.id in a route callback function? If so, what is the recommended approach to handle this situation? const express = require('express'); const app = express(); app.use('/:id&apo ...

Navigational Menu Sliding in Compact Area

Hello! I am looking for advice on how to code in order to achieve the design shown in image 1 and create a navigation system. My challenge is that I have 5 navigation items but limited space. My goal is to display only 3 items at a time, hence why I have ...

Experimenting with Vuejs by testing a function that delivers a Promise upon the execution of the "Created" hook

In my Vuejs application, I have the following script written in Typescript: import { Foo, FooRepository } from "./foo"; import Vue from 'vue'; import Component from 'vue-class-component'; import { Promise } from "bluebird"; @Component ...

Error Found in Angular2 Console Inspection

So, when I check the webpage inspection console, I see this error: Uncaught SyntaxError: Unexpected token { at Object.<anonymous> (main.bundle.js:3885) at __webpack_require__ (polyfills.bundle.js:51) at eval (eval at <anonymous> (m ...

Updating multiple rows that are spread out across different sections of a Google Sheets document can be easily

I am facing an issue with my ExpressJS/Mongoose app where I need to update data in my database and reflect those updates in Google Sheets using the Google Sheets API. The challenge is that the updated documents in my database correspond to scattered rows i ...

Tips for truncating a long string on Firefox for a responsive design

Can someone help me figure out how to display a 2-line image text below? Sample Image This is what it looks like in Chrome, but unfortunately, it doesn't work in Firefox. I came across a website that has a tutorial for Chrome: https://css-tricks.com/ ...

Navigate to a different HTML page following a POST request

I am currently facing a challenge with implementing a Login API for a university project. The issue is as follows: I have created a form where users can input their email and password, and my goal is to redirect them to another HTML document named "home.ht ...

Notifications will be displayed with Alertifyjs to the individual who activated them

Just diving into the world of nodejs and express framework, so I appreciate your patience as I navigate through this learning process. I've implemented the alertifyjs library to display notifications for different alerts on my site. However, I&apos ...

Problem with utilizing Passport-Local while executing a Mongoose.save operation

I've been troubleshooting the following code snippet: router.post('/register', function(req, res) { User.register(new User({ username : req.body.username }), req.body.password, function(err, user) { if (err) { ...