Is there a way for me to display the image name at the bottom before uploading it, and have a new div created every time I upload an image?

Is there a way to display the image name at the bottom and have it create a new div every time an image is uploaded? I would appreciate any help with this...

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>






<div class="card">
<img id="blah" alt="your image" width="100" height="100" />
//The image name will be displayed at the bottom, not next to the "choose file" button
</div>


<input type="file" 
    onchange="document.getElementById('blah').src = window.URL.createObjectURL(this.files[0])">

javascripthtmljquerycsstwitter-bootstrap

Answer №1

To display the file name that has been uploaded, simply extract the name and place it in a new container. Your use of this.files[0] is correct. All you need to do is add .name to retrieve the file name and assign it to the designated container.

function showSelectedFile(fileName){
  document.getElementById('image').src = window.URL.createObjectURL(fileName)
  document.getElementById('filename').textContent = fileName.name
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>

<div class="card">
<img id="image" alt="your image" width="100" height="100" />
<span id="filename">No file selected</span>
</div>

<input type="file"
    onchange="showSelectedFile(this.files[0])">

Answer №2

function EmbedImage(inputElement)
{
  var container = document.createElement("div");
  container.className = "image-container";
  
  var image = document.createElement("img");
  image.src = window.URL.createObjectURL(inputElement.files[0]);
  container.appendChild(image); 
  
  var caption = document.createElement("span");
  caption.innerHTML = "<br>"+inputElement.files[0].name;
  container.appendChild(caption); 
  
  document.getElementById("allImages").appendChild(container);
  
  inputElement.value = '';
}
<div id="allImages">

</div>

<input type="file" onchange="EmbedImage(this);">

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

jQuery appears to be unresponsive or inactive

I'm trying to implement a jQuery script that will slide in a header after scrolling on the page, but for some reason, it's not working. When I reach the 3rd line, my code editor displays a !read only alert, suggesting there may be a syntax issue? ...

javascriptjquerycss

Checking for the Existence of a Database Table in HTML5 Local Storage

Upon each visit to my page, I automatically generate a few local database tables if they do not already exist. Subsequently, I retrieve records from the Actual Database and insert them into these newly created local tables. I am wondering if there is a me ...

javascriptsqldatabasehtmllocal

Is it possible to trigger a winform function from an HTML page?

Looking for assistance with my WinForm application that includes a C# WebBrowser control. The WebBrowser control loads an HTML page which features a button. I am seeking a way to trigger a function in the WinForm (such as Form1.cs) when this button is cl ...

htmlwinformswebbrowser-control

Converting an image to base64 format for storing in localStorage using Javascript

Currently, I am working on code that sets the background-image of a link. This is what I have so far: $("a.link").css("background-image", "url('images/icon.png')"); However, I want to enhance it by storing the image in localStorage: if (!local ...

javascriptjqueryhtmlbase64local-storage

Using JavaScript to create customized checkboxes is a useful way to

I am looking to develop a JavaScript code that saves all the checkboxes selected by a user. When the user clicks on the finish button, the code should display what they have chosen (text within the label). Admittedly, I am unsure of how to proceed and wou ...

javascriptjquery

Ensure alignment of gradients between two divs, even if their widths vary

Among my collection of 10 inline divs, each one boasts a unique width and color gradient. While the 45-degree lines are uniform across all the divs, is there a way to ensure that these gradients match seamlessly? I've shared my CSS code snippet below ...

htmlcssgradientrepeating-linear-gradient

Ways to make text within a container smoothly slide down

Hello, I have a question about jQuery as I am relatively new to it. I am currently working on creating a team members section where clicking on a team member will slide down information about that person underneath. I have managed to set up the parent co ...

jquerycss

Incorporate content from HTML into various sections

Is there a way to dynamically extract the h4 headers and the first sentence from each section of this HTML, and then add them to a new div? function summarize() { let headings = document.getElementsByTagName("h4"); // Get all H4 elements let newsText = do ...

javascripthtmldomappendappendchild

The behavior of the Google chart seems quite unusual

I have this Google chart that retrieves data from a database. Here is what it looks like: https://i.stack.imgur.com/iuKJb.png Notice how a line is dragged across all the data, and it gets worse as you go further. Here is the code I am using: <!DOCTY ...

phpjquerygoogle-visualization

Storing audio files in Firebase Cloud Database and displaying them in React js + Dealing with an infinite loop problem

Lately, I've been encountering a persistent issue that has proven to be quite challenging. Any assistance would be greatly appreciated. Thank you in advance. The objective is to create a form that allows for the easy addition of new documents to the ...

javascriptreactjsfirebasegoogle-cloud-firestore

What is the proper way to include a URL when submitting an AJAX form?

When I try to call a servlet using HTML, jQuery and Ajax by submitting a form, I keep getting a 404 error saying the resource cannot be found. My project is built with Maven. The Servlet is located in the src/main/java package under : com.mycompany.sample ...

javajavascriptjqueryhtmlajax

Managing errors within AngularJS in your controller.js file

In my NodeJS + AngularJS single page application, there are fields for inputting text. I need to create a function in controller.js to check if any of the fields are empty so that an error alert can be displayed in the browser. This is my controller.js fi ...

htmlangularjsnode.js

Combine the content from multiple text areas and submit it to another text area

****UPDATE**** Thanks to @JasonB, I was able to resolve the previous issue mentioned. Now, I have three additional textareas on the same form that should only appear when their respective checkboxes are clicked. How can I integrate this into my current sc ...

javascriptjqueryhtmlcss

Adjusting the height of flex items to 100%

I'm currently diving into the world of flexbox by exploring various tutorials. Here's an example I created without utilizing Flex. Instead, I relied on float:left. Check out the example: https://jsfiddle.net/arhj8wxg/4/ I attempted to convert t ...

htmlcssflexbox

CKeditor does not accept special characters or diacritics in keywords

Recently, I came across a helpful code snippet for CKeditor that counts and ranks the most used words in a textarea. This feature is invaluable for generating SEO-keywords suggestions while writing articles. However, there is an issue with non-English char ...

javascripthtmljquerycssckeditor

Unable to interact with web element

When using selenium, I have a web element that I want to select. The WebElement.IsDisplayed() method returns true, but I am unable to perform the webelement.click() operation. port_dimension = canvas.find( By.xpath( "//*[local-name() = 'rect'][ ...

javacssseleniumselenium-webdriver

Issue encountered with the DevExtreme npm module: Uncaught TypeError - $(...).dxButton is not recognized as a function

Instructions for installing DevExtreme npm can be found on their official page here: https://www.npmjs.com/package/devextreme var $ = require('jquery'); require('devextreme/ui/button'); var dialog = require('devextreme/ui/dialog&a ...

javascriptjquerynpmwebpackdevextreme

Load texture using ImageUtils with callback in Canvas Renderer

Currently, I am utilizing three.js revision 53. While attempting to load a texture in Canvas Renderer (specifically on Win7) and incorporating a callback for the onLoad event, the texture fails to display. Surprisingly enough, removing the callback functi ...

javascriptcanvaswebglthree.js

What methods and applications are available for utilizing the AbortController feature within Next.js?

My search application provides real-time suggestions as users type in the search box. I utilize 'fetch' to retrieve these suggestions from an API with each character input by the user. However, there is a challenge when users quickly complete the ...

javascriptnext.js

Sending a JSON object from JSP to JavaScript using AJAX

Is there a way to transfer JSON values from JSP to JavaScript as an object using AJAX without resorting to global JavaScript variables, which can expose the JSON content in the page's source? The desired scenario is as follows: The JSP URL is opene ...

javajavascriptajaxjsp