I have a button to upload image files and I want to customize it to allow for uploading more than one image file. What is the logic to achieve this?
<input type="file" />, which renders a choose button with text that says `no files chosen` in the same line.
Is it possible to customize the text "no files chosen" below the choose button? I also wish to include a camera image before the no files chosen text.
How can I implement this to enhance my site?
Thank you
To conceal the input field, you can enclose it within a div with a height of 0px and overflow set to hidden. Then, you can create a button or another HTML element that you can customize to your liking. When this button is clicked, you can use JavaScript or jQuery to trigger a click on the hidden input field:
<div style="height:0px;overflow:hidden">
<input type="file" id="fileInput" name="fileInput" />
</div>
<button type="button" onclick="chooseFile();">choose file</button>
<script>
function chooseFile() {
$("#fileInput").click();
}
</script>
By following this approach, the input field remains hidden, allowing you to design the button as per your requirements while ensuring that clicking it always triggers the file input selection.
If you prefer not to use jQuery, you can replace the script tag with the following vanilla JavaScript code:
<script>
function chooseFile() {
document.getElementById("fileInput").click();
}
</script>
Here's a creative solution I experimented with today for one of my projects!
HTML
<div class="custom_file_selector">
<span>Select File</span>
<input name="Choose File" type="file" />
</div>
CSS
.custom_file_selector{
position:relative;
display:inline-block;
border-radius:8px;
border:#ebebeb solid 1px;
width:250px;
padding: 4px 6px 4px 8px;
font: normal 14px Myriad Pro, Verdana, Geneva, sans-serif;
color: #7f7f7f;
margin-top: 2px;
background:white
}
.custom_file_selector input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
You have the capability to personalize it solely utilizing CSS. Take a look at the provided link for more information.
HTML
<label class="btn-upload">
<input type="file" name="fileupload">
<button class="btn">Browse</button>
</label>
.btn-upload {
position: relative;
overflow: hidden;
display: inline-block;
}
.btn-upload input[type=file] {
position: absolute;
opacity: 0;
z-index: 0;
max-width: 100%;
height: 100%;
display: block;
}
.btn-upload .btn{
padding: 8px 20px;
background: #337ab7;
border: 1px solid #2e6da4;
color: #fff;
border: 0;
}
.btn-upload:hover .btn{
padding: 8px 20px;
background: #2e6da4;
color: #fff;
border: 0;
}
<div>
<style>
.picture{
position:relative;
display:inline-block;
width:3%;
padding: 0%;
}
.picture input[type="file"]{
-webkit-appearance:none;
position:absolute;
top:0; left:0;
opacity:0;
}
</style>
<div class="picture">
<span><img src='admin/ico/fms.ico' class "picture"></span>
<input name="image" type="file" />
</div>
</div>
I'm currently working on a dropdown menu using Bootstrap 4. The dropdown menu is functional, but I'm facing an issue where it only toggles once. I have tried various solutions recommended on different websites, but none of them seem to work. Belo ...
Something interesting I discovered is that I can do the following: height() + 100); When I attempted to execute: $('.modal1').colorbox.resize({height()+100}); I was puzzled as to why it didn't work. All I wanted to achieve is to add an ad ...
My current project involves creating a paint program in JavaScript, and I am aiming to implement an undo function rather than just an eraser. How can I store events in an array and then enable the deletion of each event individually? I have a dropdown men ...
In my Node.js project, I am utilizing the V4 syntax of express-validator as recommended: const { check, validationResult } = require('express-validator/check'); const { matchedData } = require('express-validator/filter'); Additionally ...
I'm struggling with getting my navigation bar to work properly alongside a slide animation. No matter what I try, the navbar keeps overlapping. Here's the code I have so far: Here is the HTML section: Navbar section: <ul class="slidesho ...
Here's the scenario I'm facing: I have rows with buttons that, when clicked, reveal a set of options. The challenge is that depending on where the row is located on the page, the settings need to open either above or below the button. When the b ...
My app was created using Quick flip 2, and I needed to resize it for mobile screens, so I implemented jquery-mobile. Here is the code snippet: <!--css--> <style> .quickFlip, .quickFlip3 { height: 350px; width: 400px; } .quickFlip2 { ...
I am attempting to use the fetch function to send an array that has the following structure: {"cards":[[189,2],[211,2],[238,2],[778,2],[985,2],[1008,2],[1073,2],[1171,2],[48886,2],[49161,2],[49164,2],[49184,1],[49356,2],[50372,2],[51722,1],[52422,2]],"her ...
One of the challenges I'm facing involves loading and storing a model using $resource in AngularJS. This particular model is an aggregate with nested collections, which are displayed in an HTML view using ng-repeat. The structure of the model looks l ...
Is there a way to present JSON objects retrieved from my server more visually on my webpage rather than just using an alert? success: function (data, textStatus, jqXHR) { alert(data.details + '\nHello ' + data.client ...
I am currently working on a project where I need to detect audio files (mp3, mp4, m4a, and wav) when clicking a link within a UIWebview. I have implemented the delegate call -(BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)re ...
I'm trying to make a REST API call, but running into issues with the developerId parameter being sent incorrectly: let developerId = "123#212"; let url = \`\${Constants.BASE_URL}\${marketId}/developers/\${developerId}\`; retur ...
I am in the process of developing a versatile repository that can be used for every entity within the application. mongo-repository.ts import { Document, Model, Types } from 'mongoose'; type MongooseModel<T> = Model<T & Document&g ...
As a novice in the realm of web programming, I find myself seeking some guidance to untangle a riddle. Regrettably, my grasp of the basics still leaves much to be desired. Within my main page, view.adminsettings.php, I've designated a Navigation DIV ...
I am facing an issue where I have added a label and input in ng-repeat. The functionality works fine when the user clicks edit to show the input and hide the label. However, the problem arises when the user clicks on the new button as it displays the new i ...
I am currently looking for the best way to connect my React component with socket.io in order to listen to events. My current approach involves including the following HTML code: <script src="socket.io/socket.io.js"></script> and then initial ...
I'm having trouble updating the request options as they are now deprecated. I can't seem to locate the alternative option for this. Can anyone offer some assistance? import { Injectable } from '@angular/core'; import { HttpClient } fr ...
Struggling to grasp Tailwind CSS as I try to compile the CSS but keep encountering errors. Despite following numerous tutorials, this persistent error continues to hinder my progress. This is the specific error message that keeps popping up: $ npm run bui ...
As a beginner in the world of javascript, I am just starting to dip my toes into it. In the past, I have used join() without any issues, but now I am facing a problem where this join is returning an empty string. Upon inspecting myArray, the data seems t ...
Struggling with implementing ajax in node js for the first time. I've been testing it using the console, but unable to get a response. Here's my code: <script> function getMessage() { var data = $("#messageselect").val() $.ajax({ ...