check file extension before upload

[irigsoft]

Hello, I want to check real file type (File Headers) before upload it, is it possible with unigui on Client Side?

 

[Sherzod]

Hello,

10 hours ago, irigsoft said:

Hello, I want to check real file type (File Headers) before upload it, is it possible with unigui on Client Side?

UniFileUploadButton?

[irigsoft]

10 minutes ago, Sherzod said:

Hello,

UniFileUploadButton?

I use UniFileUpload.

I set Filter, but what happend if user change "virus.exe" to  "mypicture.jpg" ?

[Sherzod]

2 minutes ago, irigsoft said:

I use UniFileUpload.

Okay.

17 minutes ago, Sherzod said:

UniFileUploadButton

If you will use this component, then I think I can give you a quick solution.

[irigsoft]

2 minutes ago, Sherzod said:

Okay.

If you will use this component, then I think I can give you a quick solution.

Yes, I use it now.

[Sherzod]

20 minutes ago, irigsoft said:

Yes, I use it now.

Okay. You can try this approach:

1. 

procedure TMainForm.UniFormReady(Sender: TObject);
begin
  UniFileUploadButton1.JSInterface.JSCode(#1'._checkFile = function(){'#1'.fileInputEl.dom.addEventListener("change", function(e){var accepted = ajaxRequest('#1', "checkFile", {fileName: e.target.files[0].name}, false).responseText == "true"; if (accepted == false){e.stopPropagation()}})};'#1'._checkFile();');
end;

2. 

procedure TMainForm.UniFileUploadButton1AjaxEvent(Sender: TComponent;
  EventName: string; Params: TUniStrings);
begin
  if EventName = 'checkFile' then
  begin
    // Validation logic
    if (Params.Values['fileName'] <> '') and (ExtractFileExt(Params.Values['fileName']) = '.png') then
      UniSession.SendResponse('true')
    else
      UniSession.SendResponse('false');
  end;
end;

3.

procedure TMainForm.UniFileUploadButton1Completed(Sender: TObject;
  AStream: TFileStream);
begin
  ShowMessage('complete');
  (Sender as TUniFileUploadButton).JSInterface.JSCall('_checkFile', []); // Must be added after successful upload
end;

 

[irigsoft]

18 minutes ago, Sherzod said:

You can try this approach

Thank You , 

I read code and this logic I found:

1. Select file and create Ajax event

2. If Ajax event fires then server check file extension

 

but is there a way to check the selected file with extension "myfavoriteimage.png" is not just renamed from "virus.exe" to "myfavoriteimage.png"
I am trying to protect the server from malicious actions

[irigsoft]

Example (explanation) of my need:

https://stackoverflow.com/questions/18299806/how-to-check-file-mime-type-with-javascript-before-upload/29672957#29672957

https://stackoverflow.com/questions/10329133/mime-type-check-useless-for-file-upload-in-particular-using-the-javascript-fi

 

example code: 

https://gist.github.com/GiantZOC/db1d30b31ffb9d8ca73b6c4f4fe991df

is it possible to use this code in unigui, and how if is possible ?

[irigsoft]

.

[irigsoft]

@Sherzod, I make it to work with uniFileUpload Example on Server Side, based on information here: https://en.wikipedia.org/wiki/List_of_file_signatures

FileUpload.zip

procedure UniFileUpload1Completed(Sender: TObject; AStream: TFileStream);
var
  DestName    : string;
  DestFolder  : string;
  dataDyn     : array [0..10] of byte;
  sFileExt,
  sByte       : String;

//convert Byte To String
function bintoAscii(const bin: array of byte): AnsiString;
var i: integer;
begin
  SetLength(Result, Length(bin));
  for i := 0 to Length(bin)-1 do
    Result[1+i] := AnsiChar(bin[i]);
end;

begin
  DestFolder := UniServerModule.StartPath + 'UploadFolder\';
  DestName := DestFolder + ExtractFileName(UniFileUpload1.FileName);

  AStream.Position := 0;
  AStream.Read (dataDyn,SizeOf (dataDyn));

  //convert readed Bytes to String
  sByte := bintoAscii (dataDyn);

  If  POS (#$3C#$3F#$78#$6D#$6C#$20,sByte) > 0 then begin
      //3C 3F 78 6D 6C 20
      sFileExt := '.xml';
  end;
  If  POS (#$25#$50#$44#$46#$2D,sByte) > 0  then begin
      //25 50 44 46 2D
      sFileExt := '.pdf';
  end;
  If  POS (#$89#$50#$4E#$47#$0D#$0A#$1A#$0A,sByte) > 0  then begin
      //89 50 4E 47 0D 0A 1A 0A
      IsImage := True;
      sFileExt := '.png';
  end;
  If  POS (#$42#$4D,sByte) > 0 then begin
      //42 4D
      IsImage := True;
      sFileExt := '.bmp';
  end;
  If  POS (#$FF#$D8#$FF#$E0,sByte) > 0 then begin
      //FF D8 FF E0
      IsImage := True;
      sFileExt := '.jpg';
  end;

  If  (POS (#$FF#$D8#$FF#$E0#$00#$10#$4A#$46#$49#$46#$00#$01,sByte) > 0)
  OR (POS (#$FF#$D8#$FF#$EE,sByte) > 0)
  OR (POS (#$FF#$D8#$FF#$E1 + '????' + #$45#$78#$69#$66#$00#$00,sByte) > 0)
  OR (POS (#$FF#$D8#$FF#$E0,sByte) > 0)
  then begin
      //
      IsImage := True;
      sFileExt := '.jpeg';
  end;

  If  (POS (#$66#$74#$79#$70#$69#$73#$6F#$6D,sByte) > 0) then begin
      //66 74 79 70 69 73 6F 6D
      sFileExt := '.mp4';
  end;

  //check if Declared Extention is Real Extention
  if (ExtractFileExt(UniFileUpload1.FileName) <> sFileExt) then begin
      ShowMessage ('For FILE: ' + UniFileUpload1.FileName
                  + '</br>' + ', real File Type is ' + ANSIUPPErCase (sFileExt)
                  + '</br>' + 'UPLOAD is NOT possible.'
                  );
      AStream.Position := 0;
      //AStream.Size := 0;
      AStream := nil;
  end
  //If OK, then UpLoad
  else begin
            DestFolder:=UniServerModule.StartPath+'UploadFolder\';
            DestName:=DestFolder+ExtractFileName(UniFileUpload1.FileName);
            UniLabel4.Caption:='File Name: '+UniFileUpload1.FileName;
            CopyFile(PChar(AStream.FileName), PChar(DestName), False);
            ShowMessage('File: '+ UniFileUpload1.FileName+' Uploaded to folder: '+DestFolder);
  end;
 

 

If you can help to make it work on Client Side will be nice.

[Sherzod]

48 minutes ago, irigsoft said:

If you can help to make it work on Client Side will be nice.

Something like this:

https://gist.github.com/philfreo/54933d8eccd5a250a23a

[irigsoft]

3 minutes ago, Sherzod said:

Something like this:

https://gist.github.com/philfreo/54933d8eccd5a250a23a

Yes, how to use it on unigui ?

[Sherzod]

Another link:

html - How to check file MIME type with JavaScript before upload? - Stack Overflow

[irigsoft]

10 minutes ago, Sherzod said:

Another link:

html - How to check file MIME type with JavaScript before upload? - Stack Overflow

I read this, but I can't find how to read the first few bytes of a file with Javascript.

 

Thanks to Your help (and links) I will use (and control) real files type on Server Side, like my example above.

 

[Sherzod]

4 minutes ago, irigsoft said:

I read this, but I can't find how to read the first few bytes of a file with Javascript.

I will try analyze, perhaps not fast, but I will try. Thanks.

[Sherzod]

2 hours ago, irigsoft said:

I will use (and control) real files type on Server Side

What kind of files will you accept? I mean, not to check the files to all types.

[irigsoft]

3 minutes ago, Sherzod said:

What kind of files will you accept? I mean, not to check the files to all types.

All types will be (user will choose in settings file), but if you have an example for one, I'll make it for the others.

Start with video files will be good.

[Sherzod]

OK.

[Sherzod]

On 3/4/2023 at 6:21 PM, irigsoft said:

All types will be (user will choose in settings file), but if you have an example for one, I'll make it for the others.

Hello,

I think I found one of the possible solutions. I'll post soon.

[Sherzod]

11 minutes ago, Sherzod said:

I think I found one of the possible solutions. I'll post soon.

On the client side.

[Sherzod]

For all upload controls by default, including multiupload...

[Sherzod]

@irigsoft

Try this approach for now, but keep in mind that I have changed the unigui function which may change in the future.

You can add the contents of the file to MainForm.Script or just include this file in your project.

_submitFile.js