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

Putting AngularJS controller through its paces using Jasmine

Here is the code for my NewPageCtrl.js file: angular.module('NewPageCtrl', []).controller('NewPageController', function($scope, $document) { $scope.showMe = false; }); And here is the content of test.js: describe('NewPageC ...

javascriptangularjsunit-testingkarma-jasmine

What is the best way to retrieve the identifier of the checkbox that was recently selected by the user with jQuery?

My asp.net repeater is binding the member id to the checkbox id within a fieldcontain of jquery mobile. <div data-role="fieldcontain" style="margin: 0px"> <fieldset data-role="controlgroup"> <asp:Repeater ID="rpt" runat="server" ...

c#jqueryasp.net

Is there a way to broadcast a message to all the Discord servers where my bot is currently active using v14 of discord.js?

Can someone assist me in creating code that allows me to send a message to all servers at my discretion? I have not found any resources on this topic for discord.py or the newer versions of discord.js ...

javascriptnode.jsdiscord.js

What is the best way to modify the underline style of a tab in Material UI?

I'm trying to customize the underline of: https://i.stack.imgur.com/J2R1z.png Currently, I am using material ui version 4.12.3 The code snippet for generating my tabs is below: function renderTabs(): JSX.Element { return ( <Tabs className={cla ...

cssreactjstypescriptmaterial-ui

What is the proper way to reference the array you require within a function?

Is there a way to input the name of an array (such as a, b, or any other chosen array) into a function? I've tried using inputs[3].value but it doesn't seem to be working. How can I achieve this? I have a total of 4 fields, and I think using sele ...

javascripthtml

Convert a pandas dataframe into a JSON object with nested structures

Someone raised a similar question in a different forum, which was expertly answered by user1609452 using R. However, I believe there is more to explore with this topic. Let's consider a table (MyData) that looks like this: ID Location L_size L_co ...

javascriptpythonjsonrpandas

Iterating through the sorted list in reverse order, retrieving the text of each list item

Is there a way to navigate through an ordered list, extract and return the text based on a scenario where the user clicks on an li element like Cat 1-2? The goal is to concatenate all parent li's text into either a string or an array. If an array is u ...

javascriptjqueryhtml

Creating customizable divider lines with text next to them using HTML in emails

How can I create an adjustable line with a word next to it, ensuring that long words do not wrap onto a second line? I want the line to stay on one line and the left side to shrink accordingly. Also, I need the text input area to be flexible so I can input ...

htmlcssemailnewsletter

Jumping transitions in thumbnail images

Could you please visit I've noticed that when hovering over the thumbnails in the last column, the images jump a bit after transition, especially in Firefox. Do you have any suggestions on how to resolve this issue? ...

htmlcssresponsive-designcss-transitions

What is the best way to eliminate leading zeros in PHP when echoing SQL statements?

Being a front-end programmer on a team of three, my PHP/MySQL skills are fairly basic. However, our back-end programmer is going on vacation and we have a deadline to address a minor visual detail. Currently, we are working on a page that displays multiple ...

javascriptphpcssdatezero

pass an array from the controller to a view by utilizing JSON within the MVC framework

I am encountering an issue with the following code: var mapcity = new Array([]); $.ajax({ type: 'GET', url: '/home/DrawMap', dataType: 'json', succe ...

jqueryasp.net-mvcjson

Crafting emails with text and images that adapt seamlessly for viewing in Outlook365, Gmail,

I have a PowerShell script that generates an HTML file named email.html. This file contains inline CSS and base64 encoded images, and it is sent to me daily as part of my website reports. I would like all the content (text/images) in the body of this emai ...

htmlcssoutlookresponsive

What is the best way to customize Node.js configuration when it is executed through npm?

Check out this documentation on node config: node myapp.js --NODE_CONFIG='{"Customer":{"dbConfig":{"host":"customerdb.prod"}}}' However, if I run a npm script, all parameters will be passed to npm instead of nodejs, right? How can I pass the -- ...

javascriptnode.jsnpmnpm-config

Implementing TypeScript type definitions for decorator middleware strategies

Node middlewares across various frameworks are something I am currently pondering. These middlewares typically enhance a request or response object by adding properties that can be utilized by subsequent registered middlewares. However, a disadvantage of ...

javascriptnode.jstypescriptexpress

Using Node.js to execute JavaScript with imported modules via the command line

Having limited experience with running JavaScript from the command line, I am facing a situation where I need to utilize an NPM package for controlling a Panasonic AC unit, which includes a wrapper for their unofficial API. My objective is to create a sim ...

javascriptnode.jsnpm

"Rearranging the Firefox ghost image by dragging and dropping it

My drag and drop game is working perfectly on all browsers except for Firefox. In Firefox, the ghost image that appears when an item is dragged seems to be positioned very far away from the cursor. Although the ghost image can still be seen on the page, it ...

javascripthtmlcssfirefox

Success callbacks parsed from AJAX requests

When dealing with a Backbone object and making an AJAX call to save it, I often wonder about the different ways the success callback can be handled. Sometimes, I see a generic success: function (data) { console.log(data); Other times, it's more spec ...

javascriptajaxbackbone.js

Execute the function on each visit to the page

Hello and thank you in advance for any help provided. I have a website where I want to redirect US visitors to our US-specific site through a modal popup when they arrive on our Australian site. I only want the script to execute once per visit. How can I ...

jqueryajax

The 'length' property is not found within the 'HTMLElement' type

Can someone assist me with looping over the number of nav-items I have? I am encountering an error that says: Property 'length' does not exist on type 'HTMLElement'. I understand that changing document.getElementById('nav-item) to ...

javascripttypescriptangular6

Discover the art of concurrently listening to both an event and a timer in JavaScript

Upon loading the page, a timer with an unpredictable duration initiates. I aim to activate certain actions when the countdown ends and the user presses a button. Note: The action will only commence if both conditions are met simultaneously. Note 2: To cl ...

javascripthtml