1

I'm using CF7 to capture user input and for them to upload an image file. I want to display the image file on the screen once its uploaded and before the submit button is pressed.

I can see on the screen the file name, and if I jQuery the input value it says c:\fakepath\[filename].

My jQuery is:

var x = jQuery('span.imageid1 input').val();

which produces c:\fakepath\[filename]

Is it possible to find the local path, as the image is not saved to the WPDB until the user hits submit.

rollstuhlfahrer
  • 3,988
  • 9
  • 25
  • 38
user9378402
  • 11
  • 1

1 Answers1

1

Accessing the filename is restricted, this is a security feature. You won't be able to get the full path. See How to resolve the C:\fakepath? or Getting value from <file> gives C:\fakepath\filename, even in Linux

You can however read the selected file and display a thumbnail of the selected image without accessing the filename:

function handleFiles(files) {
  for (var i = 0; i < files.length; i++) {
    var file = files[i];

    if (!file.type.startsWith('image/')){ continue }

    var img = document.createElement("img");
    img.classList.add("obj");
    img.file = file;
    preview.appendChild(img); // Assuming that "preview" is the div output where the content will be displayed.

    var reader = new FileReader();
    reader.onload = (function(aImg) { return function(e) { aImg.src = e.target.result; }; })(img);
    reader.readAsDataURL(file);
  }
}

Source

This is using the FileReader API

rollstuhlfahrer
  • 3,988
  • 9
  • 25
  • 38