Simple Fileupload

Share your advanced knowledge/code with the community.
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Simple Fileupload

Post by Peter »

Code: Select all

Procedure UploadFileCallback(Success, Filename.s, Result.s)
  
  Debug "UploadFileCallback('" + Filename + "'):"
  Debug Success
  Debug Result
  Debug "----------------------------"
  
EndProcedure

Procedure UploadFile(URL.s, File, Callback)
  
  Protected FileToUpload
  Protected Filename.s
  
  ! v_filetoupload = spider.file.objects.Get(v_file).localFile;
  
  ! v_filename     = v_filetoupload.name;
  
  Debug "Uploading " + Filename + "..."
  
  ! var formData = new FormData();
  
  ! formData.append('file', v_filetoupload);
  
  ! $.ajax({
  !   url: v_url,
  !   data: formData,
  !   contentType: false,
  !   processData: false,
  !   method: 'POST',
  !   type: 'POST',
  !   success: function(response)           { v_callback(true,  v_filename, response) },
  !   error:   function(xhr, status, error) { v_callback(false, v_filename, xhr.statusText) },
  ! });
  
EndProcedure

Procedure ReadCallback(Status, Filename.s, File, Size)
  
  If Status = #PB_Status_Loaded
    
    Debug "File: " + Filename.s + " / Size: " + Size + " bytes"
    UploadFile("[YourUpload].php", File, @UploadFileCallback()) ; <-- adjust the path to your upload-component!
    CloseFile(File)
    
  ElseIf Status = #PB_Status_Error
    
    Debug "Error when loading the file: " + Filename$
    
  EndIf
  
EndProcedure

Procedure OpenFileRequesterCallback()
  While NextSelectedFile()
    ReadFile(#PB_Any, SelectedFileID(), @ReadCallback(), #PB_LocalFile)
  Wend
EndProcedure

Procedure ChooseFileEvent()
  OpenFileRequester("*.*", @OpenFileRequesterCallback(), #PB_Requester_MultiSelection)
EndProcedure

OpenWindow(0, 0, 0, 300, 50, "Upload file example", #PB_Window_ScreenCentered)
ButtonGadget(0, 10, 10, 280, 30, "Choose file(s)...")

BindGadgetEvent(0, @ChooseFileEvent())
Example upload.php (dummy):

Code: Select all

<?php
header("Access-Control-Allow-Origin: *");

if(!empty($_FILES['file'])) {
	echo "The file ".  basename( $_FILES['file']['name']). " has been uploaded";
}
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

Post by Dirk Geppert »

Hello Peter, thank you very much for the upload example.
What I have to do, to add add an own parameter to the Http header to, e.g. a SessionID?

Best regards
Dirk
User avatar
Peter
Posts: 1086
Joined: Mon Feb 24, 2014 10:17 pm
Location: 127.0.0.1:9080
Contact:

Re: Simple Fileupload

Post by Peter »

Dirk Geppert wrote:What I have to do, to add add an own parameter to the Http header to, e.g. a SessionID?
if I understand you correctly, this is how you can do it:

Code: Select all

Protected YourSessionID.s = "12345"

! var formData = new FormData();
! formData.append('file', v_filetoupload);

! formData.append('SessionID', v_yoursessionid); // <- here
and on server side:

Code: Select all

$YourSessionID = $_POST["SessionID"];
respectively:

Code: Select all

YourSessionID.s = CGIParameterValue("SessionID") 
(if I remember correctly)
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

Post by Dirk Geppert »

Hi Peter, thx, I've tried it that way too. But the value SessionID will not added in the request header.
It will be included in the Post Data, in this case:

Code: Select all

-----------------------------9733649934111991961716185548
Content-Disposition: form-data; name="SessionID"

12345
-----------------------------9733649934111991961716185548--
Edit: I found it. It works with headers:

Code: Select all

Procedure UploadFile(URL.s, File, Callback)
 
  Protected FileToUpload
  Protected Filename.s
  Protected YourSessionID.s = "12345"
  
  ! v_filetoupload = spider.file.objects.Get(v_file).localFile;
 
  ! v_filename     = v_filetoupload.name;
 
  ! var formData = new FormData();
 
  ! formData.append('file', v_filetoupload);
 
  ! $.ajax({
  !   url: v_url,
  !   data: formData,
  !   headers: { 'SessionID' : v_yoursessionid },
  !   contentType: false,
  !   processData: false,
  !   method: 'POST',
  !   type: 'POST',
  !   success: function(response)           { v_callback(true,  v_filename, response) },
  !   error:   function(xhr, status, error) { v_callback(false, v_filename, xhr.statusText) },
  ! });
 EndProcedure
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

Post by Dirk Geppert »

It doesn't work that way, bcoz the browser then makes a CORS query:

Code: Select all

Access-Control-Request-Headers: sessionid
and this leads to an error: "Kopfzeile 'sessionid' ist aufgrund der Kopfzeile 'Access-Control-Allow-Headers' aus der CORS-Preflight-Antwort nicht zulässig"

Pity it would have been so easy. :(
Dirk Geppert
Posts: 282
Joined: Fri Sep 22, 2017 7:02 am

Re: Simple Fileupload

Post by Dirk Geppert »

Okay. This problem can also be solved easily. On the server side you have to confirm that you support the type: SessionID via "Access-Control-Allow-Headers"

But how do I get the header from the post on the server with CGI?

Tried it with CGIVariable("SessionID") and CGIParameterName(), but no success.
AMpos
Posts: 42
Joined: Mon Aug 03, 2020 5:15 pm

Re: Simple Fileupload

Post by AMpos »

As the upload.php file I have been using this one:

https://www.w3schools.com/php/php_file_upload.asp

(where it says "the complete upload PHP script")

but it is not working, it seems the upload.php script is receiving an empty string as filename.

Any idea / hint?
AMpos
Posts: 42
Joined: Mon Aug 03, 2020 5:15 pm

Re: Simple Fileupload

Post by AMpos »

Hi again!

I have been using this sucesfully, but I want to sent a second parameter to the PHP file, but I dont know how.

I want to say something like "upload this X.jpg file and save/upload it as myname.jpg"

I guess the change/code has to be added in UploadFile() procedure, and how to get this on PHP

(my knowledge of javascript and PHP is null)

Thank you for your time.

I have been playing with this with no luck:

Code: Select all

Procedure UploadFile(URL.s, File, Callback)
 
  Protected FileToUpload
  Protected Filename.s
  Protected outname.s="outputname"
 
  ! v_filetoupload = spider.file.objects.Get(v_file).localFile;
 
  ! v_filename     = v_filetoupload.name;
 
  ! var formData = new FormData();
 
  ! formData.append('file', v_filetoupload);

 ! formData.append('extra', v_outname);
 
  ! $.ajax({
  !   url: v_url,
  !   data: formData,
  !   headers: { 'SessionID' : v_yoursessionid },
  !   contentType: false,
  !   processData: false,
  !   method: 'POST',
  !   type: 'POST',
  !   success: function(response)           { v_callback(true,  v_filename, response) },
  !   error:   function(xhr, status, error) { v_callback(false, v_filename, xhr.statusText) },
  ! });
 EndProcedure
and of course, how to access/read this variable in PHP (https://www.w3schools.com/php/php_file_upload.asp)
AMpos
Posts: 42
Joined: Mon Aug 03, 2020 5:15 pm

Re: Simple Fileupload

Post by AMpos »

Found!

In PHP you hace to add

Code: Select all

$extra = $_POST["extra"];
Post Reply