Display an alert message through jQuery script if the input type file is not an image

Question

Display an alert message through jQuery script if the input type file is not an image

When working with an input type file, if an image is selected it will show a preview. If something other than an image, like a PDF or DOCX file, is selected I want to show an alert as invalid. However, I am encountering an error: Cannot read property 'split' of undefined

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>

<input type='file' id='input1'>
<div class="hide_this" style="display:none;">    <img id='imagepreview1' width="100" height="100" >
<button type="button" class="close" aria-label="Close" style="position: absolute;top:30px;opacity:1.2;">
  <span aria-hidden="true" style="color:black;">&times;</span>
</button>
</div>


<script>
$("#input1").change(function() {
    readURL(this);
    $('#imagepreview1').show();
    $('.hide_this').css({
        'display': 'block'
    });
});
$('.close').click(function() {
    $(".hide_this").hide();
    document.getElementById("input1").value = "";
    $("#imagepreview1").hide();
});

function readURL(input) {
    if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var ext = input.files[0].name.split('.').pop().toLowerCase();
            if ($.inArray(ext, ['gif', 'png', 'jpg', 'jpeg']) == -1) {
                alert('invalid extension!');
            }
            $('#imagepreview1').prop('src', e.target.result).show();
        }
        reader.readAsDataURL(input.files[0]);
    }
}
</script>

javascript jquery html css

Answer 1

Answer №1

Upon reading your comment and request, in addition to the undefined error mentioned. One potential way to bypass your security check is by creating a file named: jpg.exe.

To achieve this, utilize a regex expression and ensure that your file is correctly selected. Utilize the onselect event.

let good = 'test.jpg';
let bad = 'jpg.test';
let re = (/\.(gif|jpg|jpeg|tiff|png)$/i).test(good);
if (re) {
    console.log('Good', good);
}

console.log('Bad:', bad);

It's also important to make sure you implement this change:

let ext = $("#input1").val().split(".").pop().toLowerCase();

In the case of a PDF file, consider using a library after evaluating the expression.

var url = 'https://s1.q4cdn.com/806093406/files/doc_downloads/test.pdf';


let re = (/\.(pdf)$/i).test(url);
if (re) {
  console.log(re);
  //
  // Asynchronously download PDF
  //
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({
        scale: scale,
      });
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<canvas id="the-canvas" style="border:1px solid black"></canvas>

Answer 2

Upon reading your comment and request, in addition to the undefined error mentioned. One potential way to bypass your security check is by creating a file named: jpg.exe.

To achieve this, utilize a regex expression and ensure that your file is correctly selected. Utilize the onselect event.

let good = 'test.jpg';
let bad = 'jpg.test';
let re = (/\.(gif|jpg|jpeg|tiff|png)$/i).test(good);
if (re) {
    console.log('Good', good);
}

console.log('Bad:', bad);

It's also important to make sure you implement this change:

let ext = $("#input1").val().split(".").pop().toLowerCase();

In the case of a PDF file, consider using a library after evaluating the expression.

var url = 'https://s1.q4cdn.com/806093406/files/doc_downloads/test.pdf';


let re = (/\.(pdf)$/i).test(url);
if (re) {
  console.log(re);
  //
  // Asynchronously download PDF
  //
  var loadingTask = pdfjsLib.getDocument(url);
  loadingTask.promise.then(function(pdf) {
    //
    // Fetch the first page
    //
    pdf.getPage(1).then(function(page) {
      var scale = 1.5;
      var viewport = page.getViewport({
        scale: scale,
      });
      //
      // Prepare canvas using PDF page dimensions
      //
      var canvas = document.getElementById('the-canvas');
      var context = canvas.getContext('2d');
      canvas.height = viewport.height;
      canvas.width = viewport.width;
      //
      // Render PDF page into canvas context
      //
      var renderContext = {
        canvasContext: context,
        viewport: viewport,
      };
      page.render(renderContext);
    });
  });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.2.2/pdf.js"></script>
<canvas id="the-canvas" style="border:1px solid black"></canvas>

Answer 3

Answer №2

If you're attempting to retrieve the value of an input element with the ID my_file_field and it doesn't exist, make sure you are using input1 instead:

var extension = $("#input1").val().split(".").pop().toLowerCase();

Answer 4

If you're attempting to retrieve the value of an input element with the ID my_file_field and it doesn't exist, make sure you are using input1 instead:

var extension = $("#input1").val().split(".").pop().toLowerCase();

Answer 5

Answer №3

Your selected file is labeled as #input1 instead of #my_file_field

Update

var extension = $('#my_file_field').val().split('.').pop().toLowerCase();

to

var extension = $('#input1').val().split('.').pop().toLowerCase();

Answer 6

Your selected file is labeled as #input1 instead of #my_file_field

Update

var extension = $('#my_file_field').val().split('.').pop().toLowerCase();

to

var extension = $('#input1').val().split('.').pop().toLowerCase();

Display an alert message through jQuery script if the input type file is not an image

Answer №1

Answer №2

Answer №3

Similar questions

Sorting data on-the-fly using an HTML Select drop-down menu

Rendering an object as a React child is not allowed (object found with keys {this}). To display multiple children, make sure to use an array instead of an object

Leveraging ES6 Generators for Efficient XMLHttpRequests

Creating a Dynamic Shout Box with jQuery

What is the best way to ensure that TwentyTwenty.js images are always positioned in the

When combining <a> with the class line-through, the line does not appear

When using dynamic handler assignment within useEffect, the updated state is not reflected in the handler

What is the process for extracting information from a middleware within a Next.js framework?

Encountering the error message "Uncaught TypeError: $.ajax is undefined"

Displaying a base64 image in a new tab with JavaScript on iOS devices

A comprehensive guide on how to find keywords within an array and then proceed to make all text within the parent div tag stand

What is the best approach for establishing an asynchronous connection to a MongoDB database?

In the event of a 404 error, simply direct the user to the pageNotFound before ultimately guiding them back

Tips for enhancing your HTML email template with borders:

The export feature in the Datatable is currently experiencing technical difficulties

Sending a message through Discord.JS to a designated channel

Steps to assign a value to a variable upon clicking on text

Implement a delay before sending a new ajax request with jQuery in order to optimize performance

The page keeps refreshing repeatedly

What is causing `foo()` to function in this specific scenario?