Searching the letter variable after the point to validate upload in the Dropzone

Question

I’m having a problem, I’m actually developing an image upload system and I’m using the Dropzone, but I need to do something to separate the files I have, in fact I can only accept images like jpeg, png, jpg. For this I am taking the name of the file sent example: blablabla.jpeg I need to get everything after the point or I need you to come back to me, jpeg. So I make a case, and if it’s not what I upload I cancel.

How to do this (get everything after the . !ponto) javascript?

Or the Dropzone system itself would have a way to fix this ?

Answer 1

If to grab the extension a file remember names may have point before the extension which will make your script (/a/112999/3635) fail.

You can do it this way:

var v = "ARQUIVO.1.2.3.4.PNG";
var splt = v.split(".");

document.getElementById("nome").innerHTML = v;
document.getElementById("extensao").innerHTML = splt[splt.length - 1];

<div id="nome"></div>
<div id="extensao"></div>

If you want to remove the extension name you can use regex with .match:

var v = "ARQUIVO.1.2.3.4.PNG";
var splt = v.match(/(.*?)\.([a-zA-Z0-9]+)$/);

document.getElementById("nomecompleto").innerHTML = splt[0];
document.getElementById("nome").innerHTML         = splt[1];
document.getElementById("extensao").innerHTML     = splt[2];

<div id="nomecompleto"></div>
<div id="nome"></div>
<div id="extensao"></div>

Using the back-end

But pay close attention, this type of checking is not safe, anyone can rename a file to an invalid extension. I don’t know which language to use, but it’s best to check mimetype, for example:

• Compare File Extension

Using the Dropzone.js

How are you using the Dropzone.js create a javascript for this is totally unnecessary, the Dropzone itself has the validation option, see the documentation http://www.dropzonejs.com/#config-acceptedFiles

Use this to accept only . jpg, . jpeg and . png (I don’t know if the check is secure or done by mimetype, but it creates the server-side check as previously said):

var myDropzone = new Dropzone("#meuid", {
    url: "URL",
    acceptedFiles: "image/jpeg,image/png"
});

JPG only:

var myDropzone = new Dropzone("#meuid", {
    url: "URL",
    acceptedFiles: "image/jpeg"
});

Or so for all types of images:

var myDropzone = new Dropzone("#meuid", {
    url: "URL",
    acceptedFiles: "image/*"
});

Answer 2

I found the solution, all I had to do was

var split = varivel.split(".");

then to appear everything you have after the point I did:

split[1]

Below is an example of how to use.

var v = "ARQUIVO.PNG";
var splt = v.split(".");

$(".anterioro").html(v);
$(".posterior").html(splt[1]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="anterioro"></div>
<div class="posterior"></div>