In PixelDrop speichern Beta
Lass die Menschen, die deine Website oder App nutzen, eine Datei direkt in ihrem eigenen PixelDrop speichern. Ein Script-Tag, ein Aufruf.
Beta: Dieses Werkzeug ist neu. Optionen können sich ändern, und dein Feedback hilft, es zu gestalten. Fragen oder Ideen? Schreibe an [email protected].
- Einbauen
- Ausprobieren
- Datei auswählen
- Was die Person sieht
- Was deine Seite erhält
- Registrieren und das Abzeichen bekommen
- Dateien in deiner App empfangen
Einbauen
<script src="https://pixeldrop.ca/sdk.js"></script>
<button id="save">Save to PixelDrop</button>
<script>
document.getElementById("save").onclick = function () {
PixelDrop.save(myFileOrBlob, { name: "report.pdf" })
.then(function (saved) { console.log("saved", saved.id, saved.folder); })
.catch(function (err) { console.log("not saved:", err.code); });
};
</script>
Optionen: name (der Dateiname) und folder (standardmäßig landet die Datei in einem Ordner mit dem Namen deiner Seite; gib einen kurzen Text an, um den Ordner selbst zu benennen, oder false, um die Datei lose zwischen den Dateien der Person abzulegen).
Rufe PixelDrop.save() aus einem Klick heraus auf: Der Browser öffnet das PixelDrop-Fenster nur bei einem Klick. Die Datei kann ein File, ein Blob oder eine Funktion sein, die eines zurückgibt (oder ein Promise darauf).
Ausprobieren
Wähle eine Datei und drücke die Schaltfläche. Du brauchst ein PixelDrop-Konto mit Membre und verbundenem Pixeldrain-Konto.
Eine Datei aus ihrem PixelDrop auswählen lassen
PixelDrop.pick({ hours: 168 })
.then(function (file) { console.log(file.name, file.url); })
.catch(function (err) { console.log("not chosen:", err.code); });
Ein Fenster zeigt der Person ihre eigenen Dateien; sie wählt eine (oder mehrere mit multiple: true). Deine App erhält { id, name, size, url, expires_at }: einen Link zur Datei, der hours Stunden gilt (1 bis 720, Standard 168). Sie erhält den Inhalt der Datei nur über diesen Link und sonst nichts aus dem Konto. Fehler: popup_blocked, cancelled, not_member, no_files, failed.
Was die Person sieht
Ein kleines pixeldrop.ca-Fenster öffnet sich. Die Person meldet sich bei Bedarf an und liest: „deine-seite.com möchte eine Datei in deinem PixelDrop speichern“, mit Dateiname und Größe. Sie drückt Speichern. Die Datei landet in ihrem PixelDrop, in einem Ordner mit dem Namen deiner Seite (du kannst den Ordner selbst benennen oder die Datei lose ablegen). Nichts wird mit jemandem geteilt.
Der Name der Seite kommt vom Browser, nicht von deinem Code, daher kann keine Seite vorgeben, eine andere zu sein. Die Personen sehen die genutzten Seiten und entfernen sie unter Einstellungen → Verbundene Apps.
Was deine Seite erhält
PixelDrop.save() gibt ein Promise zurück, das mit { id, name, size, folder } aufgelöst wird. Deine Seite erhält nie einen Schlüssel, ein Token oder Zugriff auf das Konto: nur das Ergebnis.
Fehler-code | Bedeutung |
|---|---|
popup_blocked | Der Browser hat das Fenster blockiert. Rufe save() direkt aus einem Klick auf. |
cancelled | Die Person hat das Fenster geschlossen oder Abbrechen gedrückt. |
not_member | Das Speichern von anderen Websites erfordert PixelDrop Membre (die kostenlose Testphase zählt). |
too_large | Ohne die PixelDrop-Browsererweiterung können Dateien über 25 MB nicht gespeichert werden. Mit ihr jede Größe. |
failed | Alles andere; err.message sagt, was. |
- Es funktioniert auf jeder
https-Seite (und auflocalhostwährend der Entwicklung). - Mit der PixelDrop-Browsererweiterung geht die Datei direkt vom Browser zum Pixeldrain der Person, ohne Größenbeschränkung. Ohne sie laufen Dateien bis 25 MB über den Server von PixelDrop.
- Die Person zahlt nichts extra und du auch nicht: PixelDrop speichert selbst nichts, die Datei liegt in ihrem eigenen Pixeldrain-Konto.
- Im Bestätigungsfenster kann die Person „Dieser Seite immer erlauben, hier zu speichern“ ankreuzen: Speichervorgänge deiner Seite starten dann nach 3 Sekunden von selbst, mit einer Abbrechen-Schaltfläche, bis die Person deine Seite in den Einstellungen entfernt.
App registrieren und das Abzeichen „Verifiziert“ erhalten
Eine nicht registrierte Seite erscheint im Fenster als „Diese Seite ist nicht bei PixelDrop registriert“. Registriere sie, und die Leute sehen ihren Namen und, sobald wir sie geprüft haben, ein grünes Abzeichen ✓ Verifizierte App.
- Melde dich an und öffne Einstellungen → Für Entwickler. Gib den Namen deiner App und die Adresse deiner Seite ein (
https://deine-seite.com). - PixelDrop gibt dir eine Textzeile. Veröffentliche unter
https://deine-seite.com/.well-known/pixeldrop-verify.txteine Textdatei mit genau dieser Zeile. - Drücke Jetzt prüfen. PixelDrop liest die Datei einmal, über https, ohne Weiterleitungen zu folgen. Stimmt sie überein, ist deine Seite bewiesen und ihr Name wird angezeigt.
- Wir prüfen die App dann und genehmigen sie: Das Abzeichen erscheint. Du kannst deine App jederzeit entfernen.
Leuten erlauben, Dateien an deine App zu senden
Sobald deine Seite bewiesen ist, kannst du dort eine Empfangsadresse hinzufügen (Einstellungen → Für Entwickler). Personen, die schon von deiner Seite gespeichert haben, sehen deine App dann bei jeder Datei unter Senden an…. Wählen sie sie, schickt PixelDrop eine kleine JSON-Nachricht an deine Adresse:
{ "event": "file.shared", "id": "…", "time": "2026-10-16T20:00:00Z",
"file": { "name": "report.pdf", "size": 1234, "sha256": "…", "url": "https://pixeldrop.ca/s/…" },
"expires_at": "…", "max_downloads": 3 }
Der Link gilt 24 Stunden und für 3 Downloads. Die Nachricht sagt nichts über die Person: kein Name, keine E-Mail, kein Konto. Sie ist signiert, damit du weißt, dass sie von PixelDrop kommt. Der Header ist X-PixelDrop-Signature: t=<Unix-Sekunden>,v1=<hex>, wobei v1 der HMAC-SHA256 von <t>.<roher Body> mit deinem Geheimnis ist (in den Einstellungen angezeigt). Prüfe ihn und lehne ein t ab, das älter als ein paar Minuten ist. Antworte mit einem beliebigen 2xx-Status, um anzunehmen; alles andere sagt der Person, dass die App die Datei nicht angenommen hat.
const sig = req.headers["x-pixeldrop-signature"]; // t=...,v1=...
const [t, v1] = sig.split(",").map(x => x.split("=")[1]);
const ok = crypto.createHmac("sha256", SECRET).update(t + "." + rawBody).digest("hex") === v1
&& Math.abs(Date.now()/1000 - Number(t)) < 300;
Die Adresse muss auf deiner eigenen Seite liegen (gleicher Host, https, kein Port). PixelDrop ruft sie von seinem Server aus auf und erreicht nie private oder interne Adressen.