upload images and videos - 2

Doyin Atobaru answered on January 29, 2025 Popularity 1/10 Helpfulness 1/10

answer upload images and videos - 2

related limit bandwidth

upload images and videos - 2

Comment

return (

      <CardContent className="p-0 space-y-6">
        {selectedFiles && (
          <div className="grid place-items-center grid-cols-1 xs:grid-cols-3 md:grid-cols-4 gap-4 m-4">
            {selectedFiles.map((file, index) => (
              <div key={index} className="relative max-xs:w-full max-xs:h-52 w-40 h-40">
                {file.type.startsWith('image/') ? (
                  <Image
                    src={URL.createObjectURL(file)}
                    alt={`uploaded-${index}`}
                    layout="fill"
                    className="w-full h-full rounded-lg"
                  />
                ) : (
                  <video
                    src={URL.createObjectURL(file)}
                    controls
                    className="w-full h-full rounded-lg"
                  />
                )}
                <button
                  type="button"
                  className="absolute centralize w-7 h-7 top-[-10px] right-0 shadow-2xl bg-white text-black rounded-full p-1 text-sm"
                  onClick={() => removeFile(index)}
                >
                  <LucideX />
                </button>
              </div>
            ))}
          </div>
        )}
        <FormField
          control={form.control}
          name="media"
          render={() => (
            <FormItem className="w-full">
              <label>
                <div
                  onDrop={handleDrop}
                  onDragOver={handleDragOver}
                  className={`flex flex-col items-center justify-center h-72 gap-5 p-2 border
                border-gray-200 border-dashed cursor-pointer ${dropDisplay && 'bg-gray-200'} `}
                >
                  <div className="centralize rounded-full bg-gray-50 w-14 h-14">
                    <LucideCloudUpload className="centralize" />

                    <input
                      type="file"
                      multiple
                      accept="image/*,video/*"
                      onChange={handleFileChange}
                      className="hidden"
                    />
                  </div>

                  <div className="text-sm text-center text-gray-400">
                    <p className="text-black">
                      <span className="text-bold text-blue-400"> Click to upload </span> or drag and
                      drop
                    </p>

                    <p>SVG, PNG, JPG or MP4 (Recommended: 1920x1080 px, Max size: 1GB)</p>
                  </div>

                  <div className="relative flex items-center my-1 text-sm w-full">
                    <div className="flex-grow border-t border-gray-300"></div>
                    <span className="mx-4 text-gray-500">OR</span>
                    <div className="flex-grow border-t border-gray-300"></div>
                  </div>

                  <Button
                    type="button"
                    className="max-xs:w-full w-[242px] h-auto py-3 rounded-full bg-blue-400 text-body font-bold text-white text-right"
                  >
                    <label className="cursor-pointer">
                      Upload Files
                      <input
                        type="file"
                        multiple
                        accept="image/*,video/*"
                        onChange={handleFileChange}
                        className="hidden"
                      />
                    </label>
                  </Button>
                </div>
              </label>
              <FormMessage />
            </FormItem>
          )}
        />
      </CardContent>

Popularity 1/10 Helpfulness 1/10 Language javascript

Source: Grepper

Tags: javascript upload

Link to this answer
Share Copy Link

Contributed on Jan 31 2025

Doyin Atobaru

0 Answers Avg Quality 2/10

Closely Related Answers

limit bandwidth

Comment

apt-get install iproute2

tc qdisc add dev ens33 handle ffff: ingress
tc filter add dev ens33 protocol ip parent ffff: prio 50 u32 match ip src 0.0.0.0/0 police rate 128kbit burst 15k drop flowid :1

//you can delete this filter with this command:

tc filter del dev ens33 parent ffff: prio 50

Popularity 1/10 Helpfulness 1/10 Language shell

Source: askubuntu.com

Tags: bandwidth limit linux shell

Link to this answer
Share Copy Link

Contributed on Jan 29 2025

Tense Tern

0 Answers Avg Quality 2/10

upload images and videos - 2

Contents

More Related Answers

upload images and videos - 2

Closely Related Answers

limit bandwidth

Grepper

Documentation

Social

Legal

Contact

Oops, You will need to install Grepper and log-in to perform this action.