B4J Question Use Dropzone.js on b4j web app

[Chris Guanzon]

Has anyone here tried using Dropzone.js on a web app using B4J?

I attempted to use PHP to save the file into a folder, but it appears to be not functioning properly on the B4J web app. Is there a method to utilize it on a web app created in B4J?

 

[AHilton]

Yes, I currently use it in a few B4J web servers. It's better than the standard html form, where I was getting a ~75% failure rate on the users' first try. With dropzone, I'm only getting about a 5% failure rate on first tries.

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<form action="filehelper" class="dropzone" id="my-great-dropzone">
    <label for="file">Choose file (max size 100mb):</label>
</form>

As you can see, it feeds it into a filehelper class in B4J which is a server handler (ala: srvr.AddHandler), an example of which can be found on the forum from one of Erels webapp tutorial posts.

 

[Chris Guanzon]

Yes, I currently use it in a few B4J web servers. It's better than the standard html form, where I was getting a ~75% failure rate on the users' first try. With dropzone, I'm only getting about a 5% failure rate on first tries.

Could you please provide me with a sample code? I have a code, but it's not working in my B4J web app. However, it works fine when I run it in XAMPP

 

[Chris Guanzon]

Yes, I currently use it in a few B4J web servers. It's better than the standard html form, where I was getting a ~75% failure rate on the users' first try. With dropzone, I'm only getting about a 5% failure rate on first tries.

<script src="https://unpkg.com/dropzone@5/dist/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://unpkg.com/dropzone@5/dist/min/dropzone.min.css" type="text/css" />

<form action="filehelper" class="dropzone" id="my-great-dropzone">
    <label for="file">Choose file (max size 100mb):</label>
</form>

As you can see, it feeds it into a filehelper class in B4J which is a server handler (ala: srvr.AddHandler), an example of which can be found on the forum from one of Erels webapp tutorial posts.

What parameter do I need to pass so that I can retrieve the image and save it in the folder?

 

[AHilton]

This is a FileHelper class that gets the call from the web page. There's extra stuff in there like the callback and redirectto attributes that gets set by the specific pages showing the page containing the dropzone bits that you can ignore for a simple test page. Just work through Erels' tutorial (I found it for you here) and just use the dropzone.js stuff on the webpage side.

That's as much as I can help right now.

' Helps with the uploading of Data Files for importing

'Handler class
Sub Class_Globals
 
End Sub

Public Sub Initialize
   
End Sub

Sub Handle(req As ServletRequest, resp As ServletResponse)
    Log("Req: " & req.ContentType &", "& req.ContentLength)
    Download(req, resp)
    StartMessageLoop
End Sub


Sub Download (req As ServletRequest, resp As ServletResponse)
    Try
        Sleep(100)
        Dim data As Map = req.GetMultipartData(Main.TempDir, 100000000)                ' 100 mb is a bit overkill, but the server and desktop app are in the 10's of mbs now
    'get the callback module from the session (multiple modules can use this handler)
Log("Getting Callback and RedirectTo")
    Dim callback As Object = req.GetSession.GetAttribute("file_upload_sender")
    Dim redirectto As String = req.GetSession.GetAttribute("file_upload_sender_redirectto")

Log("haFileHelper: ")
'Log("Callback: " & callback)                ' GIVES THIS ERROR WHICH CRASHES THE DEBUGGER [IDE message - 4:46:31] An error occurred. Destination Array was Not long enough. Check destIndex And length, And the Array's lower bounds.
Log("RedirectTo: " & redirectto)
   
'Log("Data: " & data)
        CallSubDelayed2(callback, "FileUploaded", data)
'        resp.SendRedirect("datafileimport.html")
        resp.SendRedirect(redirectto)
    Catch
Log("haFileHelper - Catch Error: " & LastException.Message)
        CallSubDelayed2(callback, "FileError", LastException.Message)
        resp.SendError(500, LastException.Message)
    End Try
    StopMessageLoop
End Sub

Here's where the file gets saved. I have these subs in different websocket handlers depending on which page the user was on and how files should be handled based on those pages but they're all pretty close to the same.

Public Sub FileUploaded(parts As Map)
    Log("wsDataFileImport.FileUploaded: " & parts)
    Try
        If parts.ContainsKey("fileImport") Then
            Dim filePart As Part = parts.Get("fileImport")
            ws.Session.SetAttribute("fileImportStatus", "File uploaded successfully: " & filePart.SubmittedFilename & " size = " & NumberFormat(File.Size("", filePart.TempFile) / 1000, 0, 0) & "kb")
    '        UploadFileResult.SetText("File uploaded successfully: " & filePart.SubmittedFilename & " size = " & NumberFormat(File.Size("", filePart.TempFile) / 1000, 0, 0) & "kb")
    '        UploadFileResult.SetCSS("color", "black")

            Dim Filename As String = File.GetName(filePart.SubmittedFilename)
            ' Delete any file there with the same name
            If File.Exists(File.DirApp & Main.DirectorySeparator & "IMPORTS", Filename) = True Then File.Delete(File.DirApp & Main.DirectorySeparator & "IMPORTS", oCompany.UID &"_"& Filename)
            ' Copy the temp file to the IMPORTS directory WITH THE COMPANYID at the beginning of the filename
            File.Copy(Main.TempDir, File.GetName(filePart.TempFile), File.DirApp & Main.DirectorySeparator & "IMPORTS", oCompany.UID &"_"& Filename)
            ' NOTE: The import process will run on a schedule via the bwAutoTasks
                    
        End If
        File.Delete("", filePart.TempFile)
        
    Catch
        Log("wsDataFileImport.FileUploaded Catch: " & LastException)
    End Try
End Sub