Wappler Version : 6.8.0
Operating System : W11
Server Model: NodeJS
When using S3 Multi Upload with AC2, the progress bar does not show up while uploading, nor is there any progress recorded.
Same setup working fine with AC1.
Bump! @patrick
Can you specify which databindings exactly do not work. Like does the state.uploading not work or the specific uploading, uploaded and percent on the file entries.
Just retested the setup, and it turns out these values are updating as required.
The setup is a bit different from what the default S3 Multi upload UI looks like.
Default setup has a div marked as multi upload control. Inside it, there is a table with repeat on files object.
In our case, we have moved the table outside the multi upload control div, and are repeating on s3control.files object.
The table is repeating correctly, but the UI is not updating.
I can see in console that the values in files object are updating as expected (uploaded, percent etc), but these values inside repeat are not.
I think the upload component is correctly updating the data but the repeater somehow doesn't detect the changes. Can you post the repeater code here?
<div id="s3UploadMultipleFiles" is="dmx-s3-upload-multi"
dmx-bind:url="'/api/data-training/s3-bulk-data-upload?tagify_labels='+tagifyS3UploadLabels.values+'&txt_train='+txtS3Train.value"
accept=".txt, .docx, .pdf, .mp3, .mp4, .mpweg, .mpga, .m4a, .wav" dmx-on:done="scUpdateBulkTrainingStatus.load({})"
dmx-on:success="notif.success('File added');s3UploadMultipleFiles.reset()"></div>
<div class="d-flex flex-column">
<!-- some other code -->
<p class="border-2 border-secondary fw-bold text-center text-muted text-center align-content-center fin-upload-file-para w-100"
dmx-on:click.stop="s3UploadMultipleFiles.select()" dmx-show="s3UploadMultipleFiles.files.length==0">No File Selected
</p>
<table class="table table-striped table-bordered table-hover" dmx-hide="s3UploadMultipleFiles.files.length==0">
<thead>
<tr>
<th class="fw-bold text-muted fin-table-col-w-5">
#
</th>
<th class="fw-bold text-muted">
File Details
</th>
<th class="fw-bold text-muted">
Status
</th>
</tr>
</thead>
<tbody is="dmx-repeat" dmx-generator="bs5table" id="tableRepeatUpload" dmx-bind:repeat="s3UploadMultipleFiles.files"
key="id">
<tr>
<td>
{{$index+1}}
</td>
<td class="text-start">
<div>{{ name }}</div>
<small>{{(size/ 1024 / 1024).formatNumber(2, '.', ',')}} MB</small>
</td>
<td>
<small class="fw-bold text-success" dmx-show="!uploading && !error">Ready to Upload</small>
<small dmx-show="!uploading && error" class="text-danger">{{ error }}</small>
<div class="progress" dmx-show="uploading">
<div class="progress-bar text-bg-info" dmx-style:width="percent+'%'"></div>
<span class=" fw-bold text-muted" dmx-text="percent+'%'"></span>
</div>
</td>
</tr>
</tbody>
</table>
</div>
FYI: Multi S3 File Upload - Files UI not resetting in AC2
This is probably related - because of the repeat outside the multi-upload div.
I have tried a Multi S3 upload inside and outside the component div and neither bind the file properties correctly.
In the case of images, the dataUrl property will not show the image and seemingly all the ready states for individual files aren't updated either.
There is an error in the JS console that might help:
I put some basic bindings in place to test it some basics are set but the file data is seemingly not retrieved and the ready state is not updated:
<div class="col border" dmx-show="s3upload1.files.length" dmx-repeat:r_ups="s3upload1.files">
<div class="d-flex py-1">
<div class="d-flex align-items-start flex-column" style="width:70px;">
<img width="70" dmx-bind:src="dataUrl" dmx-show="ready">
<span class="badge badge-secondary w-100 ce-clickable mt-2" dmx-on:click="s3upload1.remove(id)">Remove</span>
<p class="small m-0">ID:{{id}}</p>
<p class="small m-0">Ready:{{ready}}</p>
<p class="small m-0">Size:{{size}}</p>
<p class="small m-0">Date:{{date}}</p>
<p class="small m-0">dataUrl:{{dataUrl}}</p>
</div>
<div class="d-flex w-100 flex-column align-items-center justify-content-center">
<dmx-value id="var_matched" dmx-bind:value="staffapp.cond_admincentreSC.sc_lists.data.q_pupconlist.where('indid',name.split('.')[0],'==').where('indtype','pupil','==')[0]"></dmx-value>
<p class="small m-0" dmx-text="name">File Name</p>
<p class="m-0" dmx-class:text-success="var_matched.value" dmx-class:text-danger="!var_matched.value" dmx-text="'Matching:'+var_matched.value.listname.split(' - ')[0].split(' (')[0]">Matching:</p>
<small dmx-show="!uploading && !error">Ready to Upload</small>
<small dmx-show="!uploading && error" class="text-danger">{{ lastError }}</small>
<div class="progress" dmx-show="uploading">
<div class="progress-bar" dmx-style:width="percent+'%'"></div>
</div>
</div>
</div>
</div>
This is the result (The image thumbnail should be above the 'Remove button'):
@patrick - let me know if you need anything furtehr to help diagnose/fix this
Could you test with the following update: dmxS3Upload.zip (12.3 KB)
1 Like
Still the same, I'm afraid. Ready stays as false and the dataUrl is not updated:
and new file being used (not cached):
Interestingly, using dmx.parse on the component does return the data, it just isn't available in the repeat:
If it helps, this is a screen shot of the data showing the 'files' array and the 'r_ups' array which is the repeat element
@patrick - I appreciate you are incredibly busy but did you have a chance to have another look at this?
Took some time to try something, here an update:
dmxS3Upload.zip (12.3 KB)
Not sure if it is the S3 upload or the repeater that is causing the exact problem. Since repeater is normally working correctly, I suspect the S3 upload. Did another rewrite of it, didn't have time to test it myself so could have errors. Here the update:
dmxS3Upload.zip (12.3 KB)
Hi @patrick, that seems to be much better!
It loads correctly and I have processed a couple of small batches of images without problem so far. I didn't see a progress bar but they uploaded so quickly that it could have easily just not shown. I'll try processing some larger files but looking good so far. Thank you 
I've had a few that created the following error:
{
"code": "40001",
"file": "/var/www/html/dmxConnectLib/lib/db/Connection.php",
"line": 144,
"message": "SQLSTATE[40001]: Serialization failure: 1213 Deadlock found when trying to get lock; try restarting transaction",
"trace": "#0 /var/www/html/dmxConnectLib/lib/db/Connection.php(144): PDOStatement->execute()\n#1 /var/www/html/dmxConnectLib/modules/dbupdater.php(350): lib\\db\\Connection->execute('UPDATE `pupil_i...', Array)\n#2 /var/www/html/dmxConnectLib/lib/App.php(223): modules\\dbupdater->update(Object(stdClass), 'update', Array)\n#3 /var/www/html/dmxConnectLib/lib/App.php(195): lib\\App->execSteps(Object(stdClass))\n#4 /var/www/html/dmxConnectLib/lib/App.php(163): lib\\App->execSteps(Array)\n#5 /var/www/html/dmxConnectLib/modules/core.php(100): lib\\App->exec(Object(stdClass), true)\n#6 /var/www/html/dmxConnectLib/lib/App.php(223): modules\\core->condition(Object(stdClass), '', NULL)\n#7 /var/www/html/dmxConnectLib/lib/App.php(195): lib\\App->execSteps(Object(stdClass))\n#8 /var/www/html/dmxConnectLib/lib/App.php(163): lib\\App->execSteps(Array)\n#9 /var/www/html/dmxConnectLib/modules/core.php(100): lib\\App->exec(Object(stdClass), true)\n#10 /var/www/html/dmxConnectLib/lib/App.php(223): modules\\core->condition(Object(stdClass), '', NULL)\n#11 /var/www/html/dmxConnectLib/lib/App.php(195): lib\\App->execSteps(Object(stdClass))\n#12 /var/www/html/dmxConnectLib/lib/App.php(163): lib\\App->execSteps(Array)\n#13 /var/www/html/dmxConnectLib/lib/App.php(152): lib\\App->exec(Object(stdClass), false)\n#14 /var/www/html/dmxConnectLib/lib/App.php(113): lib\\App->exec(Object(stdClass), false)\n#15 /var/www/html/dmxConnect/api/s3/pupilphotos/signupload.php(8): lib\\App->define(Object(stdClass))\n#16 {main}"
}
They then try the 5 upload retries (as can be seen in the console) that each fail - I'm assuming this error is from the Sign action and therefore doesn't have the necessary details when retrying the upload. For each retry does it need to check for a url and reattempt the sign SC API call if it doesn't have one?
They do usually process correctly if you re-click 'upload' once the retries have finished.
The error is not related to the S3 upload. You seem to have some locking issues when updating the database, do you have some update logic in a transaction that accessed multiple tables?
