Page 1 of 1

Simple Fileupload

Posted: Thu Jun 11, 2020 2:32 pm
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";
}

Re: Simple Fileupload

Posted: Fri Jun 12, 2020 1:42 pm
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

Re: Simple Fileupload

Posted: Fri Jun 12, 2020 2:43 pm
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)

Re: Simple Fileupload

Posted: Sun Jun 14, 2020 9:55 am
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

Re: Simple Fileupload

Posted: Wed Jul 22, 2020 12:54 pm
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. :(

Re: Simple Fileupload

Posted: Tue Sep 15, 2020 2:05 pm
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.

Re: Simple Fileupload

Posted: Thu Oct 22, 2020 12:29 am
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?

Re: Simple Fileupload

Posted: Sat Feb 20, 2021 9:23 pm
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)

Re: Simple Fileupload

Posted: Sun Feb 21, 2021 11:34 am
by AMpos
Found!

In PHP you hace to add

Code: Select all

$extra = $_POST["extra"];