Upload File

Adapun beberapa modul yang membutuhkan kemampuan halaman form untuk bisa mengupload sebuah file. Maupun itu satu file atau lebih.

Implementasi FE

Berikut implementasi field PendingUpload dan penggunaan PendingUploadHelper.

Component PendingUpload

• Properti asFile bersifat wajib agar file berbentuk binary ketika dikirim melalui API.
• Properti multiple bersifat opsional.
• Yang membedakan antara Single dan Multiple adalah pada bagian properti multiple dan onChange.
• Untuk PendingUpload dengan mengupload gambar perlu menggunakan properti fetchBeforeLoad.

Contoh Single Upload

<PendingUpload
  asFile
  required
  multiple={false}
  name="documents"
  aria-label="Upload Dokumen"
  disabled={readonly}
  onChange={(e) => setValue("documents", _.first(e))}
  onDownload={PendingUploadHelper.download}
  defaultValue={PendingUploadHelper.value(data?.documents)}
/>

Contoh Multiple Upload

<PendingUpload
  asFile
  required
  multiple
  name="documents"
  aria-label="Upload Dokumen"
  disabled={readonly}
  onChange={(e) => setValue("documents", e)}
  onDownload={PendingUploadHelper.download}
  defaultValue={PendingUploadHelper.value(data?.documents)}
/>

Contoh Upload Gambar

<PendingUpload
  asFile
  multiple
  type="image"
  disabled={readonly}
  fetchBeforeLoad={!_.isNil(data?.documentation_photos)}
  defaultValue={PendingUploadHelper.value(data?.lhp_file)}
  onDownload={PendingUploadHelper.download}
  onChange={(file) => setValue("lhp_file", file)}
/>

Implementasi BE

Trait CanUploadAttachment

• Service wajib menggunakan CanUploadAttachment.

  use CanUploadAttachment;

• Maka service akan menurunkan 2 fungsi, yaitu

  • uploadAttachmentV2() untuk single file.
  • uploadAttachmentsV2() untuk multiple file.

• Sehingga pada fungsi saveAction() hanya memanggil fungsi tersebut seperti ini.

    public function saveAction(CrudModel $model, array $data): CrudModel
    {
        try {
            DB::beginTransaction();
  
            $createdData = Arr::only($data, $this->model->getFillableColumn());
  
            $model->fill([
                ...$createdData,
                'exposure_file' => $this->uploadAttachmentsV2($model, 'exposure_file'),
                'notulensi_file' => $this->uploadAttachmentsV2($model, 'notulensi_file'),
            ]);
            $model->save();
  
            DB::commit();
  
            return $model;
        } catch (\Throwable $e) {
            report($e);
  
            DB::rollBack();
  
            throw $e;
        }
    }

Referensi File

Frontend

• src/pages/Penyelidikan/Kpm163/Kpm163Create.tsx
• src/components/Kpm193/TabHasilPenyelidikan.tsx

Backend

• app/Services/Kpm331/Kpt331aService.php
• app/Services/Kpm163/Kpt163Service.php