Instead of displaying a preview of the file, the file upload with jQuery will now showcase the file link in a new window

I am currently working on a Jquery file upload project and I have decided not to use any plugins. My goal is to achieve this using Pure Jquery / JavaScript. Instead of previewing the file, I want to display a link (View) once the image or PDF is uploaded. If the user clicks the link, it should open in a new page.

Below is my HTML Code:

Could someone provide guidance on how to accomplish this?

<div class="mob_pass">
    <label class="ctm_fnt">Attach document</label>
    <br>
    <div class="custom-file-input">
        <input type="file">
        <input type="text" class="txt_field ctm_widt" placeholder="Attached File">
        <button class="cst_select">
            <i class="fa  fa-rotate-90"></i> Attach
        </button>
    </div>
</div>

I would appreciate any assistance on this matter.

Thank you in advance!

Here is the fiddle link

javascriptjqueryhtmlcssajax

Answer №1

Include the following code in your HTML: 

<a href="#" target="_blank" class="preview">View</a>

In JavaScript, listen for the input change event, retrieve the preview, and update the a element's href attribute with the data URL you receive.

Initially hide the a link (when no file is selected), then reveal it once there is content to display.

var $preview = $(".preview");
$preview.hide();

$("input").on("change", function(){

  var files = this.files;
  var fileReader = new FileReader();

  fileReader.onload = function(e){
    $preview.attr("href", e.target.result);
    $preview.show();
  };

  fileReader.readAsDataURL(files[0]);
});

Preview on JSBin : http://jsbin.com/duziwukuro/edit?html,js,output

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

Updating AJAX parameters for HighStocks

My highstocks chart fetches JSON data from Yahoo and data structure is in the format of "www.blahAAPLblah.com". I am trying to dynamically change the value of AAPL in the URL to other company ticker symbols so that I can fetch the data and display it on m ...

javascriptajaxjsonphighcharts

Cut costs by saving checkbox states in local storage

I have a JavaScript function that creates a checkbox and listens for a change event: function test() { var a = document.getElementById('test'); var b = document.createElement('input'); b.type = 'checkbox'; b.a ...

javascriptcheckboxappendlocal-storage

AngularJS substitution with regular expressions

Looking to replace specific words in HTML content within <div> and <p> tags upon page load. Utilizing angularJS to achieve this task. This is my current function: var elementsList = e.find('p'); var regex = ('[^<>\& ...

javascriptregexangularjs

Identifying the floor or ground using a webcam in motion: A step-by-step guide

I am currently facing a unique challenge: In my project, I have markers (specifically Hiro, A, Kanji) displayed on banners, and I need to show a 3D model (such as augmented reality) when the marker is recognized. Everything works well so far, but here&apo ...

javascriptopencvimage-processingthree.jsvideo-processing

Retrieve information and functions from one component in a separate component

I currently have two components: ContainerSidebar.vue <!-- Sidebar --> <div id="b-sidebar"> <div class="change-image"> <img :src="profile.avatar != null ? profile.avatar+'#&apo ...

javascriptvue.js

Tips on transferring key values when inputText changes in ReactJs using TypeScript

I have implemented a switch case for comparing object keys with strings in the following code snippet: import { TextField, Button } from "@material-ui/core"; import React, { Component, ReactNode } from "react"; import classes from "./Contact.module.scss" ...

javascriptreactjstypescriptmaterial-uireact-dom

Unable to utilize the ng-disabled directive

Although this question may seem redundant, rest assured that I have exhausted all possible solutions. The issue lies in a disabled button using ng-disabled. I have a variable in the $scope that triggers a change in the ng-disabled attribute, but it fails t ...

htmlangularjs

What is the best way to add a delay to ajax using setTimeout when working within a switch case

Is there a way to add a delay of 20 seconds to the Ajax function before displaying the next chat line? I'm trying to implement a feature where Ajax waits a few seconds before showing the next chat line that is submitted. For instance, imagine that t ...

javascriptphpjqueryajax

Comparing JSON Objects in Javascript

I'm in the process of developing a web application that retrieves data from a server and displays it to the user. The script pulls data from the server every 10 seconds, and if there's any change in the data, it alerts the user. Currently, the co ...

javascriptjqueryjsoncompare

Ways to delete specific data and insert a new row into a Jquery data table without disrupting the remaining rows

I have a dataset with 100 rows of information, and I need to remove specific data based on ID and add new rows for those IDs. I also want to be able to edit the existing rows based on their IDs. Below is the code snippet I am using: oCustomization : { ...

javascriptjquerydatatabledatatablesjquery-datatables-editor

What is the reason for the presence of "CTYPE" in my HTML upon refreshing the page?

As I am utilizing Harp and Bootstrap for my project, I am encountering a peculiar issue. Upon refreshing the page, I notice that the text ""CTYPE html>"" is inserted within the body tags. Can anyone shed light on why this is happening? ...

htmlcsstwitter-bootstrap

I am interested in incorporating my own icon.png as a clickable button in my React JS application

Add my unique icon image as a button in my mobile application ...

javascriptreactjsicons

Using jQuery, the submenu item will receive a class based on its data id when its parent has the active class

I am struggling to add a class to the child menu when its parent has an active class. The child menu may have multiple parents. Although I wrote this code, it doesn't seem to be functioning as intended. if ($('.megamenu__list li[data-id ...

jquery

Trouble with styles not displaying correctly in nodemailer when using handlebars

I am using nodemailer and handlebars to send an email, the email is being received successfully but the styles are not being applied. This is the code I am using to send the email: const hbsConfig = { viewEngine: { extName: '. ...

javascriptnode.jstypescripthandlebars.jsnodemailer

When using Angular 8 with RxJs, triggering API calls on click events will automatically detach if the API server is offline

I have an Angular 8 application with a form containing a save button that triggers a call to a Spring Boot microservice using RxJs. I decided to test what would happen if the Rest API server were down. When the Rest API is running, clicking the button wor ...

htmlangularspring-bootrxjs

Utilizing Jquery alongside Windows Communication Foundation

I've been attempting to integrate my jQuery code with WCF, starting with a simple setup where the WCF service is hosted on IIS. It features a basic interface and implementation. Here's the WCF code snippet: [ServiceContract] public interface I ...

jquerywcf

Guide to correcting Form Data errors with XHR resulting in a 400 Bad Request

This is a straightforward piece of code I've written. It's simply a POST request to my API endpoint using FormData. Interestingly, the API is returning a bad request error for reasons unknown to me. When I tested the API with curl, everything wo ...

javascriptreactjsrestxmlhttprequestmultipartform-data

How to retrieve the index number of a clicked tab in Bootstrap 4?

I'm currently working on identifying the index of the tab clicked by the user within a group of tabs. For example, if there are five tabs and the user clicks on the second one. To calculate the total number of tabs, I can assign an ID to the navigati ...

javascriptjquerybootstrap-4

How to implement automatic page refreshing in React Native using Class Components

How can I automatically refresh the order screen to fetch new data from the API without having to restart the app? ...

javascriptreactjsreact-nativeexporeact-navigation

Unable to locate property 'location' due to being undefined

When trying to use the react-router-dom 4.0.0 library, an error was encountered: Uncaught TypeError: Cannot read property 'location' of undefined The issue seems to be with browserHistory. Previously, I had been using react-router 2.x.x witho ...

javascriptreactjsreact-router